Grammalecte  Check-in [b6be32c3ca]

Overview
Comment:[fx] main panel: label to menu items
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: b6be32c3caa7537c73262d4df3357a59412de463b7acb5cb48e085673a3178c4
User & Date: olr on 2018-03-02 23:23:33
Original Comment: [fr] main panel: label to menu items
Other Links: manifest | tags
Context
2018-03-02
23:36
[fx] main panel: fix label check-in: e78ddb114f user: olr tags: fx, trunk
23:23
[fx] main panel: label to menu items check-in: b6be32c3ca user: olr tags: fx, trunk
18:51
[fx] CSS: media print: hide grammalecte menu check-in: 2f3395cefd user: olr tags: fx, trunk
Changes

Modified gc_lang/fr/webext/panel/main.css from [6bbd4a3da0] to [7f70e2ba37].

    74     74   
    75     75   
    76     76   
    77     77   /* Main classes */
    78     78   
    79     79   html {
    80     80       box-sizing: border-box;
    81         -    width: 400px;
           81  +    width: 450px;
    82     82       height: 500px;
    83     83       font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    84     84   }
    85     85   body {
    86         -    width: 400px;
           86  +    width: 450px;
    87     87       height: 500px;
    88     88   }
    89     89   /* 
    90     90       Maximal height of a panel in WebExtention seems to be 500px.
    91     91       When going over this limit, a scrollbar appears which destructs the
    92     92       horizontal balance of elements.
    93     93       --> vertical scrolling is done with overflow in #page.
................................................................................
    97     97   #main {
    98     98       display: flex;
    99     99       background-color: hsl(210, 0%, 100%);
   100    100       min-height: 100%;
   101    101   }
   102    102   
   103    103   #menu {
   104         -    width: 50px;
          104  +    width: 100px;
   105    105       border-right: solid 1px hsl(210, 0%, 70%);
   106    106       background-color: hsl(210, 10%, 96%);
   107    107       color: hsl(210, 10%, 96%);
   108    108   }
   109    109   #logo {
   110    110       padding: 10px;
          111  +    text-align: center;
   111    112   }
   112         -#menu li {
          113  +#menu .select_block {
          114  +    min-width: 100px;
   113    115       padding: 10px 0;
   114    116       border-bottom: 1px solid hsl(210, 10%, 90%);
   115    117       text-align: center;
   116    118       cursor: pointer;
   117    119       color: hsl(210, 10%, 50%);
   118         -    list-style-type: none;
   119    120       font-size: 20px;
   120    121   }
   121         -#menu li:hover {
          122  +#menu .select_block:hover {
   122    123       background-color: hsl(210, 10%, 92%);
   123    124       color: hsl(210, 80%, 50%);
   124    125       text-shadow: 0px 0px 1px hsl(210, 100%, 70%);
   125    126   }
   126         -
          127  +.select_label {
          128  +    font-size: 12px;
          129  +    font-variant-caps: small-caps;
          130  +}
   127    131   
   128    132   #page {
   129    133       background-color: hsl(210, 0%, 100%);
   130         -    min-width: calc(100% - 51px);
          134  +    min-width: calc(100% - 101px);
   131    135       height: 500px;
   132    136       overflow: auto;
   133    137   }
   134    138   #page h1 {
   135    139       margin: 0 0 10px 0;
   136    140       color: hsl(210, 50%, 50%);
   137    141       font: bold 30px 'Yanone Kaffeesatz', "Oswald", "Liberation Sans Narrow", sans-serif;

Modified gc_lang/fr/webext/panel/main.html from [8d14026cb9] to [7538b33473].

    12     12   
    13     13         <header id="menu">
    14     14           <nav>
    15     15             <header id="logo">
    16     16               <img src="../img/logo-32.png">
    17     17             </header>
    18     18             <ul>
    19         -            <li class="select" data-page="home_page"><i class="select fa fa-star icon" data-page="home_page" title="Accueil"></i></li>
    20         -            <li class="select" data-page="ui_options_page"><i class="select fa fa-cube icon" data-page="ui_options_page" title="Options d’interface"></i></li>
    21         -            <li class="select" data-page="gc_options_page"><i class="select fa fa-cog icon" data-page="gc_options_page" title="Options grammaticales"></i></li>
    22         -            <li class="select" data-page="sc_options_page"><i class="select fa fa-book icon" data-page="sc_options_page" title="Options orthographiques"></i></li>
    23         -            <li class="select" data-page="test_page"><i class="select fa fa-flask icon" data-page="test_page" title="Tests"></i></li>
           19  +            <div class="select select_block" data-page="home_page">
           20  +              <p class="select" data-page="home_page"><i class="select select_icon fa fa-star" data-page="home_page"></i></p>
           21  +              <p class="select select_label" data-page="home_page">Accueil</p>
           22  +            </div>
           23  +            <div class="select select_block" data-page="ui_options_page">
           24  +              <p class="select" data-page="ui_options_page"><i class="select select_icon fa fa-cube" data-page="ui_options_page"></i></p>
           25  +              <p class="select select_label" data-page="ui_options_page">Interface</p>
           26  +            </div>
           27  +            <div class="select select_block" data-page="gc_options_page">
           28  +              <p class="select" data-page="gc_options_page"><i class="select select_icon fa fa-cog" data-page="gc_options_page"></i></p>
           29  +              <p class="select select_label" data-page="gc_options_page">Grammaire</p>
           30  +            </div>
           31  +            <div class="select select_block" data-page="sc_options_page">
           32  +              <p class="select" data-page="sc_options_page"><i class="select select_icon fa fa-book" data-page="sc_options_page"></i></p>
           33  +              <p class="select select_label" data-page="sc_options_page">Dictionnaires</p>
           34  +            </div>
           35  +            <div class="select select_block" data-page="test_page">
           36  +              <p class="select" data-page="test_page"><i class="select select_icon fa fa-flask" data-page="test_page"></i></p>
           37  +              <p class="select select_label" data-page="test_page">Zone de tests</p>
           38  +            </div>
    24     39             </ul>
    25     40           </nav>
    26     41         </header> <!-- #menu -->
    27     42   
    28     43         <div id="page">
    29     44   
    30     45           <section id="home_page" class="page">