Muscat i Blacklight

Els elements que es poden adaptar fàcilment en un Muscat són els següents:

• Un logo gran de la institució de 130x100, que apareix a la imatge principal pública i cerca via Blacklight, tot i que probablement deixarà d'existir quan eliminin el Blacklight. És la que està a dalt a l'esquerra d'aquetes pantalles:
  • https://ddd-muscat.uab.cat/record/
  • https://traces-muscat.uab.cat/record/ (ara no es veu, ja ho corregiré)
  • https://ifmuc-muscat.uab.cat/record/ (ara no es veu, ja ho corregiré)

• Un logo petit de la institució de 50x40 que apareix a dalt a l'esquerra de la barra superior de les pàgines internes (les de /admin), com ara aquestes (no tenen el tamany que toca, vaig agafar-ne alguna de petita sense escarressar-m'hi gaire). L'alçada de la imatge és important perquè condiciona l'aspecte i el comportament de la barra superior:
  • https://ddd-muscat.uab.cat/admin/
  • https://traces-muscat.uab.cat/admin/
  • https://ifmuc-muscat.uab.cat/admin/

• El color de fons de la barra superior de les pàgines internes (les del /admin), i que també afecta uns quants textos o títols de les pantalles, i links. Estan definits a:
  • https://github.com/rism-digital/muscat/blob/develop/config/muscat-custom-sample.scss

Els que he estat utilitzant fins ara són aquests (però atenció, perquè si el color del logo coincideix amb el color de la barra de fons i en general del color de la lletra i l'aparença, el logo no es veu):

// This is a sample file for a custom CSS for muscat.
// The file needs to be copied to ./vendor/assets/stylesheets/muscat-custom.scss

// RISM-CH color
//$primary-color: #6E3621 !default;

// RISM-ZR color
// $primary-color: #1B4E7D !default;

// Primary colors: DDD #587606, Traces #00728A, IFMuC #008A9E
$primary-color: #587606 !default; // DDD
// $primary-color: #00728A !default; // Traces
// $primary-color: #008A9E !default; // IFMuC

$table-stripe-color: lighten($primary-color, 70%) !default;
$link-color: $primary-color !default;

// Reset it to the active admin default color
$section-header-text-color: #5E6469 !default;

// BlackLight colors
// $rismBLColor: #1B4E7D; // Links and facets
$rismBLColor: #587606; // DDD Links and facets
// $rismBLColor: #00728A; // Traces Links and facets
/// $rismBLColor: #008A9E; // IFMuC Links and facets
$rismBLnavbarColor: $primary-color; // Navbar
$darkRismBLColor: darken($rismBLColor, 10%);
// Navbar text
$rismNavbarTextColor: #ddd;

$catalogBackgroundColor: #F4F3F1; // gray5

• La resta dels elements del css estan definits amb sintaxi scss (vegeu: https://sass-lang.com/) a:
  • https://github.com/rism-digital/muscat/tree/develop/vendor/assets/stylesheets/

Anna, ja es podria començar a treballar amb la personalització del disseny del Muscat. Hi ha un excés de majúscules que ens agradaria eliminar. Caldria fer una mica de capçalera, amb els logos i els botons dels desplegables més macos.
No és un css habitual sinó un scss, cal tenir-ho en compte a l'hora d'assignar la tasca a algú; ho deixem a les teves mans.

traces_muscat@taltabull:~/muscat/muscat-current/public

logos (con symbolic lynk)
traces_muscat@taltabull:~/muscat/muscat-current/public/images

css:
traces_muscat@taltabull:~/muscat/muscat-current/vendor/assets/stylesheets/muscat.scss

Per poder treballar en els css i veure els canvis que es van fent, el Ferran crearà un uploader on es pujaran els fitxers modificats.

De moment, en aquesta url (https://ddd-muscat.uab.cat/qualitat/stylesheets/) podem veure els css que cal modificar.

Ja es poden consultar, actualitzar i, si cal, esborrar els css de cadascun dels tres Muscats:

• https://ddd-muscat.uab.cat/uab/
• https://traces-muscat.uab.cat/uab/
• https://ifmuc-muscat.uab.cat/uab/

S'ha modificat el codi del css "muscat.scss" per treure el padding de la barra de sota del menú de navegació. El canvi s'ha replicat a totes les pàgines (https://ddd-muscat.uab.cat/admin).

Abans:

#title_bar {
      padding: 5px 30px;
      h2 {
          font-size: 1.4em;
      }
  }

Després:

#title_bar {
      padding: 0px 30px;
      h2 {
          font-size: 1.4em;
      }
  }

A partir de les propostes de la Noemí i d'intentar trobar la manera com canviar els (s)css, sembla que hem trobat la manera més ortodoxa de canviar l'estètica de les pàgines /admin del Muscat.

Sembla ser que molts dels valors (al menys els tamanys, marges i colors) estan definits a https://github.com/activeadmin/activeadmin/blob/master/app/assets/stylesheets/active_admin/mixins/_variables.scss

Aleshores, hem vist que si hi afegim aquests valors, canviats, a https://ddd-muscat.uab.cat/qualitat/stylesheets/muscat-custom.scss, efectivament canvia l'aspecte del Muscat. Com que la Noemí els pot actualitzar (pujant-hi una nova versió d'aquest fitxer), mirarà fins on pot arribar amb això.

Modificacions fetes a muscat.scss

- Body font-size de 12px a 13px (augment de la mida de la lletra)

Modificacions fetes a marc_editor.scss

- Majúscules per les minúscules en els formularis d'edició:

.marc_editor_group_contents {

Modificacions fetes a muscat-custom.scss:

- Color capçalera (de #587606 a #77912F)

$primary-color: #77912F !default;

- Color enllaços (de #587606 a #77912F)

$link-color: #77912F !default;

- Color títols/headers de les taules per millorar l'accessibilitat (#5E6469 a #2e2e2e)

$section-header-text-color: #2e2e2e !default;

- Reducció del padding horizontal i vertical

$horizontal-page-margin: 10px; // Abans: 30px
$section-padding: 10px; // Abans:15px

- Color del text del body

$text-color: #080808 !default;

- Color del text de la capçalera

$page-header-text-color: #ffffff !default;

- Color del menú seleccionat i del hover

$current-menu-item-background: #93a566 !default;
$hover-menu-item-background: #93a566 !default;

- Color del breadcrumb per millorar l'accessibilitat

$breadcrumbs-color: #484e53 !default;
$breadcrumbs-separator-color: #484e53 !default;

- Color del títols del formulari

$form-label-color: #77912F !default;

Modificacions fetes a muscat.scss:

- Breadcrumb en minúscules

#titlebar_left, #titlebar_right {

Modificacions fetes a muscat.scss:

- S'afegeix el següent codi per canviar les majúscules a minúscules dels registres ("mostrar"). Ex: https://ddd-muscat.uab.cat/admin/sources/273923

.attributes_table table th {
box-shadow: none;
background: none;
width: 150px;
font-size: 0.9em;
padding-left: 0;
text-transform: none;
color: #77912F;
}

- S'afegeix el següent codi per canviar les majúscules a minúscules del menú lateral de la dreta.

.sidebar_section label {
display: block;
text-transform: none;
color: #77912F;
font-size: 0.9em;
font-weight: bold;
}

Modificacions fetes a muscat.scss:

- Es redueix l'espai superior i inferior de l'h2

h2 {
font-size: 2em;
margin-bottom: 0.2em;
margin-top: 0.1em;
}

- Es posa en negreta i es modifica l'opacitat del menú desplegable esquerre del principi de la taula (Ex:https://ddd-muscat.uab.cat/admin/sources)

a.table_tools_button.disabled, .table_tools .dropdown_menu_button.disabled {
opacity: 1;
cursor: default;
font-weight: bold;
}

- Es redueix la mida de l'h2 del title_bar

#title_bar h2 {
font-size: 1.1em;
}

Modificacions fetes a muscat-custom.scss:

- Es canvia el color dels headers (del negre al gris)

$section-header-text-color: #5E6469 !default;

Modificacions fetes a muscat.scss:

- Es redueix la mida dels camps del menú de l'esquerre

form input[type=text], form input[type=password], form input[type=email], form input[type=number], form input[type=url], form input[type=tel], form input[type=date], form input[type=time], form textarea {
width: calc(80% - 22px);
border: 1px solid #c9d0d6;
border-radius: 3px;
font-size: 0.95em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: none;
padding: 2px 5px 3px;
}

Començo a treballar amb IFMUC . Aplico canvis del DDD a IFMUC (majúscules, breadcrumb, espais)

He començat a modificar els CSS de Traces .

Reunió per valorar el disseny dels Muscats:

• Es tria el disseny de l'Ifmuc però buscant atenuar els colors.

• Modificacions que cal fer:

• transparències del menú
• hover pestanya activa que quedi marcat
• enllaços subratllats només quan passes el cursor per sobre
• provar la class position sticky pel menú de la dreta
• vermell pels registres no publicats
• afegir una cerca avançada en el menú de la dreta per amagar opcions i alleugerir el menú de la dreta
• títols dels menús i de les taules en color corporatiu i subtítols en negre/gris
• diferenciar la zona de loggin/loggout de la resta del header.

Modificacions fetes a Traces :

• Transparències del menú
• Hover pestanya activa que quedi marcat
• Enllaços subratllats només quan passes el cursor per sobre
• Títols dels menús i de les taules en color corporatiu i subtítols en negre/gris
• Diferenciar la zona de loggin/loggout de la resta del header.

Ja tenim el disseny definitiu de Traces. Començo a aplicar els canvis a Ifmuc i DDD.

https://test-intern-traces.uab.cat/admin

Canvis aplicats a DDD : https://test-intern-ddd.uab.cat/admin

Canvis aplicats a IFMUC : https://test-intern-ifmuc.uab.cat/admin

Afegint-hi tres línies al css, el panell d'edició de registres Marc queda en la posició fixa:

#sections_sidebar_section {
position: fixed;
}