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: trunk, fx
23:23
[fx] main panel: label to menu items check-in: b6be32c3ca user: olr tags: trunk, fx
18:51
[fx] CSS: media print: hide grammalecte menu check-in: 2f3395cefd user: olr tags: trunk, fx
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

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

︙︙
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

111
112

113
114
115
116
117
118
119
120
121
122
123
124
125



126
127
128
129
130
131
132
133
134
135
136
137




/* Main classes */

html {
    box-sizing: border-box;
    width: 400px;
    height: 500px;
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
body {
    width: 400px;
    height: 500px;
}
/* 
    Maximal height of a panel in WebExtention seems to be 500px.
    When going over this limit, a scrollbar appears which destructs the
    horizontal balance of elements.
    --> vertical scrolling is done with overflow in #page.
        #page must have the same height than body.
*/

#main {
    display: flex;
    background-color: hsl(210, 0%, 100%);
    min-height: 100%;
}

#menu {
    width: 50px;
    border-right: solid 1px hsl(210, 0%, 70%);
    background-color: hsl(210, 10%, 96%);
    color: hsl(210, 10%, 96%);
}
#logo {
    padding: 10px;

}
#menu li {

    padding: 10px 0;
    border-bottom: 1px solid hsl(210, 10%, 90%);
    text-align: center;
    cursor: pointer;
    color: hsl(210, 10%, 50%);
    list-style-type: none;
    font-size: 20px;
}
#menu li:hover {
    background-color: hsl(210, 10%, 92%);
    color: hsl(210, 80%, 50%);
    text-shadow: 0px 0px 1px hsl(210, 100%, 70%);
}





#page {
    background-color: hsl(210, 0%, 100%);
    min-width: calc(100% - 51px);
    height: 500px;
    overflow: auto;
}
#page h1 {
    margin: 0 0 10px 0;
    color: hsl(210, 50%, 50%);
    font: bold 30px 'Yanone Kaffeesatz', "Oswald", "Liberation Sans Narrow", sans-serif;








|




|

















|






>

|
>





<


|




>
>
>
|



|








74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141




/* Main classes */

html {
    box-sizing: border-box;
    width: 450px;
    height: 500px;
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
body {
    width: 450px;
    height: 500px;
}
/* 
    Maximal height of a panel in WebExtention seems to be 500px.
    When going over this limit, a scrollbar appears which destructs the
    horizontal balance of elements.
    --> vertical scrolling is done with overflow in #page.
        #page must have the same height than body.
*/

#main {
    display: flex;
    background-color: hsl(210, 0%, 100%);
    min-height: 100%;
}

#menu {
    width: 100px;
    border-right: solid 1px hsl(210, 0%, 70%);
    background-color: hsl(210, 10%, 96%);
    color: hsl(210, 10%, 96%);
}
#logo {
    padding: 10px;
    text-align: center;
}
#menu .select_block {
    min-width: 100px;
    padding: 10px 0;
    border-bottom: 1px solid hsl(210, 10%, 90%);
    text-align: center;
    cursor: pointer;
    color: hsl(210, 10%, 50%);

    font-size: 20px;
}
#menu .select_block:hover {
    background-color: hsl(210, 10%, 92%);
    color: hsl(210, 80%, 50%);
    text-shadow: 0px 0px 1px hsl(210, 100%, 70%);
}
.select_label {
    font-size: 12px;
    font-variant-caps: small-caps;
}

#page {
    background-color: hsl(210, 0%, 100%);
    min-width: calc(100% - 101px);
    height: 500px;
    overflow: auto;
}
#page h1 {
    margin: 0 0 10px 0;
    color: hsl(210, 50%, 50%);
    font: bold 30px 'Yanone Kaffeesatz', "Oswald", "Liberation Sans Narrow", sans-serif;
︙︙

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

︙︙
12
13
14
15
16
17
18

19



20



21



22



23


24
25
26
27
28
29
30


      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>

            <li class="select" data-page="home_page"><i class="select fa fa-star icon" data-page="home_page" title="Accueil"></i></li>



            <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>



            <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>



            <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>



            <li class="select" data-page="test_page"><i class="select fa fa-flask icon" data-page="test_page" title="Tests"></i></li>


          </ul>
        </nav>
      </header> <!-- #menu -->

      <div id="page">

        <section id="home_page" class="page">








>
|
>
>
>
|
>
>
>
|
>
>
>
|
>
>
>
|
>
>








12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>
            <div class="select select_block" data-page="home_page">
              <p class="select" data-page="home_page"><i class="select select_icon fa fa-star" data-page="home_page"></i></p>
              <p class="select select_label" data-page="home_page">Accueil</p>
            </div>
            <div class="select select_block" data-page="ui_options_page">
              <p class="select" data-page="ui_options_page"><i class="select select_icon fa fa-cube" data-page="ui_options_page"></i></p>
              <p class="select select_label" data-page="ui_options_page">Interface</p>
            </div>
            <div class="select select_block" data-page="gc_options_page">
              <p class="select" data-page="gc_options_page"><i class="select select_icon fa fa-cog" data-page="gc_options_page"></i></p>
              <p class="select select_label" data-page="gc_options_page">Grammaire</p>
            </div>
            <div class="select select_block" data-page="sc_options_page">
              <p class="select" data-page="sc_options_page"><i class="select select_icon fa fa-book" data-page="sc_options_page"></i></p>
              <p class="select select_label" data-page="sc_options_page">Dictionnaires</p>
            </div>
            <div class="select select_block" data-page="test_page">
              <p class="select" data-page="test_page"><i class="select select_icon fa fa-flask" data-page="test_page"></i></p>
              <p class="select select_label" data-page="test_page">Zone de tests</p>
            </div>
          </ul>
        </nav>
      </header> <!-- #menu -->

      <div id="page">

        <section id="home_page" class="page">
︙︙

Fossil 2.20 [210e89a059] 2022-11-16 18:46:32
This page was generated in about 0.005s