Discover styles

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html

@@ -4,29 +4,16 @@
   (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
   (dsClickOutside)="close();">
   <div class="mb-3 mb-0">
-    @if (label) {
-      <label class="form-label" class="mb-0 w-100">
-        <span class="fw-bold">
-          {{label}}
-        </span>
-        <ng-container *ngTemplateOutlet="searchInput"></ng-container>
-      </label>
-    } @else {
-      <input #inputField type="text" [(ngModel)]="value" [name]="name"
-        class="form-control suggestion_input"
-        [ngClass]="{'is-invalid': !valid}"
-        [dsDebounce]="debounceTime" (onDebounce)="find($event)"
-        [placeholder]="placeholder"
-        [ngModelOptions]="{standalone: true}" autocomplete="off"
-        />
-    }
+    <ng-container *ngTemplateOutlet="searchInput"></ng-container> <!-- Esta es la búsqueda por tipo -->
+    <button class="search-icon btn" type="submit" attr.aria-label="{{ 'nav.search.submit' | translate }}">
+        <i class="fas fa-search"></i>
+    </button>
   </div>
   <ng-template #searchInput>
     <input #inputField type="text" [(ngModel)]="value" [name]="name"
-      class="form-control suggestion_input"
+      class="search-input"
       [ngClass]="{'is-invalid': !valid}"
       [dsDebounce]="debounceTime" (onDebounce)="find($event)"
-      [placeholder]="placeholder"
       [ngModelOptions]="{standalone: true}" autocomplete="off"
       />
   </ng-template>

src/app/shared/input-suggestions/input-suggestions.component.scss

@@ -14,3 +14,23 @@
 form {
     position: relative;
 }
+
+.search-input{
+    border: none;
+    border-bottom: 1px solid #7597b9;
+
+    &:focus {
+        outline: none; 
+        border-bottom-color: #007bff;
+    }
+}
+
+.search-icon {
+  position: absolute;   
+  box-shadow: none;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #888;
+  z-index: 2;
+  cursor: pointer;
+}

src/app/shared/object-collection/shared/badges/badges.component.html

@@ -4,7 +4,7 @@
 }
 <div>
   <ds-type-badge class="pe-1" [object]="object"></ds-type-badge>
-  @if (showAccessStatus) {
+  <!-- @if (showAccessStatus) {
     <ds-access-status-badge [object]="object"></ds-access-status-badge>
-  }
+  } -->
 </div>

src/app/shared/object-grid/object-grid.component.html

@@ -18,20 +18,21 @@
   @if (objects?.hasSucceeded) {
     <div class="card-columns row">
       @for (column of (columns$ | async); track column) {
-        <div class="card-column col col-sm-6 col-lg-4" @fadeIn>
-          @for (object of column; track object) {
-            <div class="card-element" [attr.data-test]="'grid-object' | dsBrowserOnly">
-              <ds-listable-object-component-loader [object]="object"
-                [viewMode]="viewMode"
-                [context]="context"
-                [showThumbnails]="showThumbnails"
-              [linkType]="linkType"></ds-listable-object-component-loader>
-            </div>
+        @for (object of column; track object) {
+          <div class="card-element" [attr.data-test]="'grid-object' | dsBrowserOnly">
+            <ds-listable-object-component-loader class="card custom-card-style"
+              [object]="object"
+              [viewMode]="viewMode"
+              [context]="context"
+              [showThumbnails]="showThumbnails"
+              [linkType]="linkType">
+            </ds-listable-object-component-loader>
+          </div>
           }
-        </div>
       }
     </div>
   }
+
   @if (objects.hasFailed) {
     <ds-error message="{{'error.objects' | translate}}"></ds-error>
   }

src/app/shared/object-grid/object-grid.component.scss

@@ -1,6 +1,10 @@
 :host ::ng-deep {
   --ds-wrapper-grid-spacing: calc(var(--bs-spacer) / 2);
 
+  .card{
+    border-color: transparent !important;
+  }
+
   div.card {
     margin-top: var(--ds-wrapper-grid-spacing);
     margin-bottom: var(--ds-wrapper-grid-spacing);
@@ -18,12 +22,40 @@
 }
 
 .card-columns {
-  margin-left: calc(-1 * var(--ds-wrapper-grid-spacing));
-  margin-right: calc(-1 * var(--ds-wrapper-grid-spacing));
-  column-gap: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-bottom: 20px;
+
+  .card-element {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+
+    .card custom-card-style{
+    padding: var(--ds-wrapper-grid-spacing);
+    border: none !important;
+    box-shadow: none !important;
+    }
+  }
+
+}
 
-  .card-column {
-    padding-left: var(--ds-wrapper-grid-spacing);
-    padding-right: var(--ds-wrapper-grid-spacing);
+@media (max-width: 768px) {
+  .card-columns {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
+
+@media (max-width: 576px) {
+  .card-columns {
+    grid-template-columns: 1fr;
+  }
+}
+

src/app/shared/search/advanced-search/advanced-search.component.html

@@ -24,16 +24,11 @@ <h4>{{ 'search.sidebar.advanced-search.filter-by' | translate }}</h4>
       </option>
     }
   </select>
-  <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
+  <input type="text" class="form-control" id="advanced-search-value"
     [placeholder]="'search.filters.filter.' + currentFilter + '.placeholder' | translate"
-    [label]="'search.filters.filter.' + currentFilter + '.label' | translate"
-    [action]="router.url"
-    [name]="'f.' + currentFilter"
+    [attr.aria-label]="'search.filters.filter.' + currentFilter + '.label' | translate"
     [(ngModel)]="currentValue"
-    (submitSuggestion)="applyFilter()"
-    (findSuggestions)="findSuggestions($event)"
-    ngDefaultControl>
-  </ds-filter-input-suggestions>
+    (keyup.enter)="applyFilter()"/>
   <button (click)="applyFilter()" [dsBtnDisabled]="currentValue === ''" class="btn btn-primary mt-2">
     {{ 'search.sidebar.advanced-search.add' | translate }}
   </button>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -7,7 +7,7 @@
     <label class="mb-0 w-100">
       <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox" role="checkbox" tabindex="0"/>
       <span class="w-100 ps-1 break-facet">
-        <span class="float-end badge bg-secondary rounded-pill mt-1 ms-1">{{filterValue.count | dsShortNumber}}</span>
+        <span class="float-end mt-1 ms-1 filter-count">{{filterValue.count | dsShortNumber}}</span>
           {{ 'search.filters.' + filterConfig.name + '.' + filterValue.value | translate: {default: filterValue.value + (community ? ' (' + community.name + ')' : '')} }}
       </span>
     </label>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss

@@ -8,6 +8,7 @@ a {
     }
 }
 
+
 .break-facet {
     word-break: break-word;
 }

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html

@@ -6,7 +6,7 @@
     role="button" tabindex="0">
     <span class="filter-value px-1">{{filterValue.label}}</span>
     <span class="float-end filter-value-count ms-auto">
-      <span class="badge bg-secondary rounded-pill">{{filterValue.count | dsShortNumber}}</span>
+      <span class="filter-count">{{filterValue.count | dsShortNumber}}</span>
     </span>
   </a>
 }

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss

@@ -9,3 +9,4 @@ a {
         vertical-align: text-top;
     }
 }
+

src/app/shared/search/search-filters/search-filter/search-filter.component.scss

@@ -1,5 +1,8 @@
 :host .facet-filter {
-  border: 1px solid var(--bs-light);
+  // border: 1px solid var(--bs-light);
+  border: 1px solid #ddd;       /* línea gris suave */
+  border-radius: 8px;           /* bordes redondeados */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   cursor: pointer;
   line-height: 0;
 

src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html

@@ -1,4 +1,17 @@
 <div>
+  @if ((isAvailableForShowSearchText | async) === false) {
+    <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
+      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
+      [action]="currentUrl"
+      [name]="filterConfig.paramName"
+      [(ngModel)]="filter"
+      (submitSuggestion)="onSubmit($event)"
+      (clickSuggestion)="onClick($event)"
+      (findSuggestions)="findSuggestions($event)"
+      ngDefaultControl
+    ></ds-filter-input-suggestions>
+  }
   <div class="filters py-2">
     @for (value of (selectedAppliedFilters$ | async); track value) {
       <ds-search-facet-selected-option [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
@@ -25,19 +38,6 @@
       }
     </div>
   </div>
-  @if ((isAvailableForShowSearchText | async) === false) {
-    <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
-      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
-      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
-      [action]="currentUrl"
-      [name]="filterConfig.paramName"
-      [(ngModel)]="filter"
-      (submitSuggestion)="onSubmit($event)"
-      (clickSuggestion)="onClick($event)"
-      (findSuggestions)="findSuggestions($event)"
-      ngDefaultControl
-    ></ds-filter-input-suggestions>
-  }
 </div>
 
 @if (vocabularyExists$ | async) {

src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html

@@ -1,4 +1,16 @@
 <div>
+  @if ((isAvailableForShowSearchText | async) === false) {
+    <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
+      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
+      [action]="currentUrl"
+      [name]="filterConfig.paramName"
+      [(ngModel)]="filter"
+      (submitSuggestion)="onSubmit($event)"
+      (clickSuggestion)="onClick($event)"
+      (findSuggestions)="findSuggestions($event)"
+    ngDefaultControl></ds-filter-input-suggestions>
+  }
   <div class="filters py-2">
     @for (value of (selectedAppliedFilters$ | async); track value) {
       <ds-search-facet-selected-option [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
@@ -25,16 +37,4 @@
       }
     </div>
   </div>
-  @if ((isAvailableForShowSearchText | async) === false) {
-    <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
-      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
-      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
-      [action]="currentUrl"
-      [name]="filterConfig.paramName"
-      [(ngModel)]="filter"
-      (submitSuggestion)="onSubmit($event)"
-      (clickSuggestion)="onClick($event)"
-      (findSuggestions)="findSuggestions($event)"
-    ngDefaultControl></ds-filter-input-suggestions>
-  }
 </div>

src/app/shared/search/search-filters/search-filters.component.html

@@ -17,7 +17,7 @@ <h2>{{filterLabel+'.filters.head' | translate}}</h2>
 }
 
 @if (inPlaceSearch) {
-  <button class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" (click)="minimizeFilters()" queryParamsHandling="merge" role="button">
+  <button class="btn shadow-none" [routerLink]="[searchLink]" [queryParams]="clearParams | async" (click)="minimizeFilters()" queryParamsHandling="merge" role="button">
     <i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}
   </button>
 }

src/app/shared/search/search-labels/search-label/search-label.component.html

@@ -1,4 +1,4 @@
-<a class="badge bg-primary me-1 mb-1"
+<a class="badge me-1 mb-1"
    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter) | translate, value: appliedFilter.label }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters$ | async)"

src/app/shared/search/search-labels/search-label/search-label.component.scss

@@ -1,4 +1,9 @@
 .badge {
   white-space: inherit;
-  font-size: 85%;
+  font-size: 90%;
+  font-weight: 510;
+  color: #000000d1;
+  border: 1.8px solid rgb(0 0 0 / 30%);
+  border-radius: 8px;
+  padding: 0.4em 0.37em;
 }

src/themes/custom/app/shared/object-collection/shared/badges/type-badge/type-badge.component.scss

@@ -1,6 +1,9 @@
 .badge {
-  color: white;
-  background-color: var(--sedici-color);
-  border: 1px solid var(--sedici-color);
-  border-radius: 0px;
+  color: #000000d1;
+  //background-color: var(--sedici-color);
+  //border: 1px solid var(--sedici-color);
+  background-color: #dee1ff;
+  border-radius: 2.5px;
+  padding: 0.4em 0.6em;
+  font-weight: var(--font-weight-regular);
 }

src/themes/custom/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.scss

@@ -25,8 +25,10 @@ sedici-context {
 
 ::ng-deep ds-badges .badge {
   padding: 0.5em;
-  font-size: 85%;
-  font-weight: var(--font-weight-regular);
+  font-size: 0.88em;
+  vertical-align: text-bottom; // Para que el badge quede alineado con el sedici-context
+
+  // font-weight: var(--font-weight-regular);
 }
 
 .subtitle {

src/themes/custom/styles/_global-styles.scss

@@ -11,4 +11,9 @@
   @media screen and (min-width: 1500px) {
     max-width: 1400px;
   }
+}
+
+.filter-count {
+    color: #6c757df7 !important; 
+    font-size: 0.9em !important;
 }