Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7026 | Rev 7028 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 7026 Rev 7027
Línea 9... Línea 9...
9 
import EmptySection from '../../components/UI/EmptySection'
 9 
import EmptySection from '../../components/UI/EmptySection'
10 
import WidgetLayout from '../../components/widgets/WidgetLayout'
 10 
import WidgetLayout from '../../components/widgets/WidgetLayout'
11 
import PaginationComponent from '../../components/UI/PaginationComponent'
 11 
import PaginationComponent from '../../components/UI/PaginationComponent'
Línea 12... Línea 12...
12 
 
 12 
 
13 
const KnowledgeCategories = styled(WidgetLayout)`
 - 
 
14 
  display: flex;
 - 
 
15 
  flex-direction: column;
 13 
const KnowledgeCategories = styled(WidgetLayout)`
- 
 
 14 
  padding: 1rem;
- 
 
 15 
  ul {
- 
 
 16 
    display: flex;
16 
  padding: 1rem;
 17 
    flex-direction: column;
- 
 
 18 
    gap: 0.5rem;
17 
  gap: 0.5rem;
 19 
  }
Línea 18... Línea 20...
18 
`
 20 
`
19 
 
 21 
 
20 
const KnowledgeGrid = styled.div`
 22 
const KnowledgeGrid = styled.div`
21 
  display: grid;
 23 
  display: grid;
22 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 24 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Línea -... Línea 25...
- 
 
 25 
  gap: 1rem;
- 
 
 26 
`
- 
 
 27 
 
- 
 
 28 
const KnowledgeCard = styled.div`
- 
 
 29 
  & > {
- 
 
 30 
    a {
- 
 
 31 
      width: fit-content;
- 
 
 32 
 
- 
 
 33 
      img {
- 
 
 34 
        width: 100%;
- 
 
 35 
        height: auto;
- 
 
 36 
      }
- 
 
 37 
 
- 
 
 38 
      h2 {
- 
 
 39 
        color: $title-color;
- 
 
 40 
        font-weight: 800;
- 
 
 41 
      }
- 
 
 42 
    }
- 
 
 43 
 
- 
 
 44 
    h3 {
- 
 
 45 
      color: $subtitle-color;
- 
 
 46 
      font-weight: 400;
- 
 
 47 
    }
- 
 
 48 
 
- 
 
 49 
    p {
- 
 
 50 
      color: $font-color;
- 
 
 51 
      font-weight: 400;
- 
 
 52 
      text-align: justify;
- 
 
 53 
      text-justify: inter-word;
- 
 
 54 
    }
- 
 
 55 
  }
- 
 
 56 
 
- 
 
 57 
  .knowledge-record-card-actions {
- 
 
 58 
    display: flex;
- 
 
 59 
    align-items: center;
- 
 
 60 
    gap: 0.5rem;
- 
 
 61 
 
- 
 
 62 
    & > * {
- 
 
 63 
      flex: 1;
- 
 
 64 
      max-width: calc(100% / 3);
- 
 
 65 
    }
- 
 
 66 
  }
- 
 
 67 
 
- 
 
 68 
  .reaction-btn {
- 
 
 69 
    align-items: center;
- 
 
 70 
    border-radius: 10px;
- 
 
 71 
    display: inline-flex;
- 
 
 72 
    gap: 0.5rem;
- 
 
 73 
    justify-content: center;
- 
 
 74 
    padding: 10px;
- 
 
 75 
    position: relative;
- 
 
 76 
    width: -webkit-fill-available;
- 
 
 77 
    transition: background-color 200ms ease;
- 
 
 78 
 
- 
 
 79 
    &:hover {
- 
 
 80 
      background-color: #f5f5f5;
- 
 
 81 
    }
- 
 
 82 
  }
- 
 
 83 
 
- 
 
 84 
  .reactions {
- 
 
 85 
    position: absolute;
- 
 
 86 
    bottom: calc(100% + 0.5rem);
- 
 
 87 
    background-color: $bg-color;
- 
 
 88 
    box-shadow: 0px 0px 3px #000;
- 
 
 89 
    gap: 0.5rem;
- 
 
 90 
    left: 50%;
- 
 
 91 
    display: none;
- 
 
 92 
    padding: 0.2rem;
- 
 
 93 
    width: fit-content;
- 
 
 94 
    border-radius: 20px;
- 
 
 95 
    transform: translateX(-50%);
- 
 
 96 
 
- 
 
 97 
    &.active {
- 
 
 98 
      display: flex;
- 
 
 99 
    }
23 
  gap: 1rem;
 100 
  }
24 
`
 101 
`
25 
 
 102 
 
Línea 26... Línea 103...
26 
const KnowledgeSearch = styled(SearchInput)`
 103 
const KnowledgeSearch = styled(SearchInput)`
Línea 97... Línea 174...
97 
            <ul>
 174 
            <ul>
98 
              <li className="knowledge-category-li knowledge-category-li-selected">
 175 
              <li className="knowledge-category-li knowledge-category-li-selected">
99 
                <input
 176 
                <input
100 
                  type="radio"
 177 
                  type="radio"
101 
                  id="category-all"
 178 
                  id="category-all"
102 
                  value="user"
 179 
                  value=""
103 
                  onChange={(e) => setCategory(e.target.value)}
 180 
                  onChange={(e) => setCategory(e.target.value)}
104 
                  hidden
 181 
                  hidden
105 
                />
 182 
                />
106 
                <label htmlFor="category-all">
 183 
                <label htmlFor="category-all">
107 
                  {labels.knowledge_area_category_all}
 184 
                  {labels.knowledge_area_category_all}
Línea 160... Línea 237...
160 
  description,
 237 
  description,
161 
  image,
 238 
  image,
162 
  title,
 239 
  title,
163 
}) => {
 240 
}) => {
164 
  return (
 241 
  return (
165 
    <WidgetLayout>
 242 
    <KnowledgeCard>
166 
      <a
 243 
      <a
167 
        href={link_view}
 244 
        href={link_view}
168 
        target="_blank"
 245 
        target="_blank"
169 
        className="knowledge-record-card-actions-view"
 246 
        className="knowledge-record-card-actions-view"
170 
        rel="noreferrer"
 247 
        rel="noreferrer"
Línea 187... Línea 264...
187 
      <h3>{category}</h3>
 264 
      <h3>{category}</h3>
188 
      <a href={link_view} target="_blank" rel="noreferrer">
 265 
      <a href={link_view} target="_blank" rel="noreferrer">
189 
        <h2>{title}</h2>
 266 
        <h2>{title}</h2>
190 
      </a>
 267 
      </a>
191 
      <p>{description}</p>
 268 
      <p>{description}</p>
192 
    </WidgetLayout>
 269 
    </KnowledgeCard>
193 
  )
 270 
  )
194 
}
 271 
}
Línea 195... Línea 272...
195 
 
 272