]> git.agnieray.net Git - galette.git/commitdiff
CSS cleaning
authorGuillaume AGNIERAY <dev@agnieray.net>
Thu, 9 Feb 2023 16:52:50 +0000 (17:52 +0100)
committerGuillaume AGNIERAY <dev@agnieray.net>
Fri, 17 Feb 2023 11:50:36 +0000 (12:50 +0100)
16 files changed:
galette/templates/default/elements/ajax_members.html.twig
galette/templates/default/elements/edit_entitleds.html.twig
galette/templates/default/pages/advanced_search.html.twig
galette/templates/default/pages/configuration_payment_types.html.twig
galette/templates/default/pages/configuration_titles.html.twig
galette/templates/default/pages/contributions_list.html.twig
galette/templates/default/pages/history.html.twig
galette/templates/default/pages/mailings_list.html.twig
galette/templates/default/pages/plugins.html.twig
galette/templates/default/pages/transactions_list.html.twig
ui/css/galette.css
ui/semantic/galette/collections/table.overrides [new file with mode: 0644]
ui/semantic/galette/collections/table.variables [new file with mode: 0644]
ui/semantic/galette/elements/input.overrides
ui/semantic/galette/globals/site.overrides
ui/semantic/theme.config

index 9534bd10338a1b1a4fc737df03ab499c430e6829..156a6c3237fbcbf5814a5601f7ad42c6921452e4 100644 (file)
@@ -1,6 +1,6 @@
 <div class="ui stackable grid align-items-center">
     <div class="eleven wide column">
-        <table id="listing" class="select_members{% if not multiple %} single{% endif %} ui celled table">
+        <table id="listing" class="listing select_members{% if not multiple %} single{% endif %} ui celled table">
             <thead>
                 <tr>
                     <th class="listing id_row">#</th>
index 45eb25bf341c8997092b6a15014d7539d72163c0..4c6b7dc4542f71576b3e44b27ea4a3200dfe8036 100644 (file)
@@ -17,7 +17,7 @@
         <tfoot>
             <tr>
                 <td data-scope="row">
-                    <span class="row-title">
+                    <span class="sr-only">
 {% if class == 'Status' %}
                         {{ _T("New status") }}
 {% else %}
@@ -53,7 +53,7 @@
             <tr class="{{ loop.index is odd ? 'odd' : 'even' }}">
                 <td data-scope="row">
                     {{ eid }}
-                    <span class="row-title">
+                    <span class="sr-only">
                         <a href="{{ url_for('editEntitled', {'class': url_class, 'action': 'edit', 'id': eid}) }}">
                             {{ _T("%s field")|replace({'%s': entry.name|escape}) }}
                         </a>
index dd4f62cd095fb66d21b0a0ff74ab2c1c84b73be0..dc3b1fe5536806877072522475be72311bd8959a 100644 (file)
                     <a
                         href="#"
                         id="addbutton_g"
-                        class="ui tiny compact icon green button tab-button tooltip"
+                        class="ui tiny compact icon green button tooltip"
                     >
                         <i class="plus icon"></i>
                         <span class="hidden">{{ _T('Add new group search criteria') }}</span>
                         <a
                             href="#"
                             id="addbutton"
-                            class="ui tiny compact icon green button tab-button tooltip"
+                            class="ui tiny compact icon green button tooltip"
                         >
                             <i class="plus icon"></i>
                             <span class="hidden">{{ _T('Add new free search criteria') }}</span>
index f387249def238b094fe111cd55939da02c6f5bc9..8e30dbb9f5724d3b453eff3640654d31c6a2cac6 100644 (file)
@@ -13,7 +13,7 @@
                     <tfoot>
                         <tr>
                             <td data-scope="row">
-                                <span class="row-title">
+                                <span class="sr-only">
                                     {{ _T("Add payment type") }}
                                 </span>
                             </td>
@@ -38,7 +38,7 @@
                 {% else %}
                                 {{ loop.index }}
                 {% endif %}
-                                <span class="row-title">
+                                <span class="sr-only">
                                     <a href="{{ url_for('editPaymentType', {'id': ptype.__get('id')}) }}">
                                         {{ _T("%s payment type")|replace({'%s': ptype.getName()}) }}
                                     </a>
index 1029b6750a3251275c96028f968e9bb9e65d2959..9707765e802b0bf674ac490ecd5eb5998178e06a 100644 (file)
@@ -14,7 +14,7 @@
                 <tfoot>
                     <tr>
                         <td data-scope="row">
-                            <span class="row-title">
+                            <span class="sr-only">
                                 {{ _T("Add title") }}
                             </span>
                         </td>
@@ -42,7 +42,7 @@
             {% else %}
                             {{ loop.index }}
             {% endif %}
-                            <span class="row-title">
+                            <span class="sr-only">
                                 <a href="{{ url_for('editTitle', {'id': title.id}) }}">
                                     {{ _T("%s title")|replace({'%s': title.short|escape}) }}
                                 </a>
index 007ed2d99a888d966cf32a7c4d8d7f1e717116ff..acb4fda50d46d294c81e07594a7c0fb9fb1fb9fc 100644 (file)
                     {{ ordre + 1 + (filters.current_page - 1) * numrows }}
                 {% endif %}
                 {% if (login.isAdmin() or login.isStaff()) or mode == 'ajax' %}
-                    <span class="row-title">
+                    <span class="sr-only">
                             <a href="{{ url_for("editContribution", {"type": ctype, "id": contribution.id}) }}">
                                 {{ _T("Contribution %id")|replace({"%id": contribution.id}) }}
                             </a>
                         </a>
                     {% endif %}
                 {% else %}
-                    <span class="row-title">
+                    <span class="sr-only">
                             {{ _T("Contribution %id")|replace({"%id": contribution.id}) }}
                         </span>
                     {% if contribution.isTransactionPart() %}
index 5857d7a4d12dd77f3f03eea344ec82477d46cfec..9e596f9182db9b6dcb67f6702eba8cb56dca0888 100644 (file)
         <tr class="{% if loop.index % 2 == 0 %}even{% else %}odd{% endif %}">
             <td data-scope="row">
                 {{ loop.index }}
-                <span class="row-title">
+                <span class="sr-only">
                         {{ _T("History entry %id")|replace({"%id": loop.index}) }}
                     </span>
             </td>
index 70e6b956ea54cd4c94f575287fcac5584975460a..79e600b131c16ad95423614ed8da1ad17bc249fd 100644 (file)
                 {% else %}
                     {{ loop.index }}
                 {% endif %}
-                <span class="row-title">
+                <span class="sr-only">
                             {{ _T('Mailing entry %id')|replace({'%id': log.mailing_id}) }}
                         </span>
             </td>
index 18eb53dcfd02868bfe6321354dc7f56311969914..d77a01026820ef235bdc5e631fc97abe7b5e5acb 100644 (file)
@@ -1,7 +1,7 @@
 {% extends 'page.html.twig' %}
 
 {% block content %}
-    <table class="listing ui celled table">
+    <table class="listing ui celled striped table">
         <!--<caption>{{ _T('Active plugins') }}</caption>-->
         <thead>
             <tr>
@@ -15,7 +15,7 @@
         </thead>
         <tbody>
             <tr>
-                <th colspan="6" class="center aligned"><strong>{{ _T('Active plugins') }}</strong></th>
+                <th colspan="6" class="center aligned plugins"><strong>{{ _T('Active plugins') }}</strong></th>
             </tr>
 {% for name, plugin in plugins_list %}
             <tr class="{% if loop.index0 % 2 == 0 %}even{% else %}odd{% endif %}">
@@ -52,7 +52,7 @@
             </tr>
 {% endfor %}
             <tr>
-                <th colspan="6" class="center aligned"><strong>{{ _T('Inactive plugins') }}</strong></th>
+                <th colspan="6" class="center aligned inactives plugins"><strong>{{ _T('Inactive plugins') }}</strong></th>
             </tr>
             <thead>
             <tr>
index 8285633913d90e12ef277547aa30bc4533907bd2..49d995bcd2fd1cb6d0e5ea8eadb97d79f969b9b1 100644 (file)
                 {% else %}
                     {{ ordre + 1 + (filters.current_page - 1) * numrows }}
                 {% endif %}
-                <span class="row-title">
+                <span class="sr-only">
                             <a href="{{ url_for("editTransaction", {"id": transaction.id}) }}">
                                 {{ _T("Transaction %id")|replace({"%id": transaction.id}) }}
                             </a>
index 1aaa97279eaae954958ecaf3a970579943ef1665..858be13524c6896219d1d0194a859259e4e5f313 100644 (file)
-/*
- * == Summary
- *
- * == Forms elements
- * == Main Galette styles
- * == Plugins installation
- * == Old styles
- */
-
-/* == Forms elements */
-#galette_body .selectize-input.required {
-    border-color:green;
-}
-
-#galette_body .selectize-input.required.invalid {
-    border:1px red solid;
-}
-
-.password-strength-text {
-    vertical-align: middle;
-    padding-left: .2em;
-}
-
-meter {
-    /* Reset the default appearance */
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    /* Applicable only to Firefox */
-    background: none;
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-meter::-webkit-meter-bar {
-    background: none;
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Webkit based browsers */
-meter[value="1"]::-webkit-meter-optimum-value { background: red; }
-meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
-meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
-meter[value="4"]::-webkit-meter-optimum-value { background: green; }
-
-/* Gecko based browsers */
-meter[value="1"]::-moz-meter-bar { background: red; }
-meter[value="2"]::-moz-meter-bar { background: orange; }
-meter[value="3"]::-moz-meter-bar { background: yellow}
-meter[value="4"]::-moz-meter-bar { background: green ; }
-
-#telemetry_panel {
-    display: none; /* Start hidden */
-}
-
-/* =/ Forms elements */
-
-/* == Main Galette styles */
+/* == Old styles */
 .hidden {
   display: none !important;
 }
 
-.selectize-control {
-    display: inline-block;
-    min-width: 10em;
-    text-align: left;
-}
-
-.selectize-control.single .selectize-input::after {
-    right: 10px!important;
-}
-
-.cssform .selectize-input {
-    margin-right: 2em;
-    min-width: 25em;
-}
-
-#galette_body .selectize-input, .public_page .selectize-input {
-    padding: .1em 20px .1em 8px;
-    overflow: unset;
-}
-
-#galette_body .selectize-dropdown .option, .public_page .selectize-dropdown .option {
-    cursor: pointer;
-}
-
-#galette_body .selectize-dropdown .active, .public_page .selectize-dropdown .active  {
-    background-color: #DDDDFF;
-}
-#galette_body .selectize-dropdown .option, #galette_body .selectize-dropdown .optgroup-header,
-.public_page .selectize-dropdown .option, .public_page .selectize-dropdown .optgroup-header {
-    padding: .2em .5em;
-}
-
-.ui-tabs .tab-button {
-    position: absolute!important; /* used along with .button */
-    right: .5em;
-    top: .5em;
-}
-
-legend .tab-button {
-    position: absolute!important; /* used along with .button */
-    right: 2.5em;
-}
-
-/* loading animation */
-#loading {
-    position:fixed;
-    top:0;
-    left: 0;
-    margin: 0;
-    height: 100%;
-    width: 100%;
-    text-align: center;
-    background-color:rgba(0, 0, 0, 0.5);
-    z-index: 100000;
-}
-#loading p {
-    position: fixed;
-    top:45%;
-    left: 50%;
-    transform: translateY(-50%);
-    transform: translateX(-50%);
-    width: 20%;
-    background-color: rgba(255,255,255,.8);
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    padding: 1em 0;
-    -moz-box-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
-    -webkitbox-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
-    box-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
-}
-
-.cotis-ok {
-    background-color: #DDFFDD!important;
-    vertical-align: top;
-}
-
-.cotis-never {
-    background-color: #EEEEEE!important;
-    vertical-align: top;
-}
-
-.cotis-exempt {
-    background-color: #DDFFDD!important;
-    vertical-align: top;
-}
-
-.cotis-soon {
-    background-color: #FFE9AB!important;
-    vertical-align: top;
-}
-
-.cotis-late, .transaction-uncomplete {
-    background-color: #FFDDDD!important;
-    vertical-align: top;
-}
-
-.cotis-lastday {
-    background-color: #FFD9AB!important;
-    vertical-align: top;
-}
-
-.cotis-normal, .transaction-normal {
-    background-color: #DDFFDD!important;
-    vertical-align: top;
-}
-
-.cotis-give {
-    background-color: #FFDDDD!important;
-    vertical-align: top;
-}
-
 .debuginfos span{
     display: block;
     font-family: monospace;
     font-size:1.1em;
 }
 
-/* =/ Main Galette styles */
-
-/* == Plugins installation */
-#plugin_install {
-    background: #DDDDFF;
-    border-radius: 6px;
-    padding: 1em;
-}
-
-#plugin_install footer {
-    margin:.5em 0 0;
-    padding: .1em .5em;
-    text-align: center;
-    font-size: 0.85em;
-    border: 1px rgba(255, 255, 255, 0.5) solid;
-    -moz-border-radius: 10px 10px 10px 10px;
-    -webkit-border-radius: 10px 10px 10px 10px;
-    border-radius: 10px 10px 10px 10px;
-}
-
-#plugin_install footer p{
-    margin:.5em .5em 0;
-    color: #666666;
-    font-size: 1.2em;
-    font-weight:bold;
-}
-
-#plugin_install footer ol{
-    color:#999;
-    padding:0;
-    margin:0 0.5em 0.5em 0.5em;
-    list-style-type:none;
-}
-#plugin_install footer li{
-    line-height:1.7em;
-    display:inline;
-    margin: .1em;
-    padding: 0;
-}
-
-#plugin_install footer .current{
-    color:black;
-    font-weight:bold;
-}
-
-#btn_box{
-    text-align: right;
-    margin:0;
-}
-
-#plugin_install > div {
-    padding: .2em;
-    background-color: white;
-    border-radius: 6px;
-}
-
-#plugin_install h2{
-    margin: .5em 0 0;
-    font-size:1.2em;
-    text-align: center;
-}
-
-#installation_mode {
-    display: table;
-    table-layout: fixed;
-    border-spacing: .5em;
-    border-collapse: separate;
-}
-
-.installation_mode {
-    display: table-cell;
-    width: 10%;
-    border-radius: 6px;
-    -moz-box-shadow: 0px 1px 2px #555;
-    -webkitbox-shadow: 0px 1px 2px #555;
-    box-shadow: 0px 1px 2px #555;
-}
-
-#plugin_install h3 {
-    font-size: 1.1em;
-    margin: .2em 0 0;
-    color: #666666;
-    text-align: center;
-}
-
-#plugin_install ul {
-    margin: 0 auto .7em!important;
-}
-
 ul.leaders {
     display: block!important;
     max-width: 40em;
@@ -303,31 +45,6 @@ ul.leaders span + span {
     right: 0;
 }
 
-/* =/ Plugins installation */
-
-/* == Old styles */
-table.listing .row-title {
-    display: none;
-}
-
-table.listing th a,
-a.listing {
-    color: #212121;
-    vertical-align: middle;
-}
-
-table.listing td {
-    line-height:1.5em;
-    margin-top:.3em;
-    padding:.1em .2em;
-    vertical-align: middle;
-}
-
-table.listing th a:hover,
-a.listing:hover {
-    color: #666!important;
-}
-
 .emptylist {
     background-color: #EEEEEE;
     text-align: center;
@@ -390,16 +107,6 @@ a.listing:hover {
     border-style: solid;
 }
 
-#listing,
-table.listing {
-    width: 100%;
-}
-
-#listing.single,
-table.listing.single {
-    display: table;
-}
-
 #listfilter form {
     margin-bottom: 0px;
 }
@@ -451,18 +158,6 @@ table.listing.single {
     margin-right:auto;
 }
 
-#listing td,
-table.listing td,
-#listing input,
-table.listing input{
-    vertical-align: middle;
-}
-
-td img, a img {
-    vertical-align: middle;
-    max-width: none;
-}
-
 .sql_log {
     border:1px dashed;
     display:block;
@@ -532,7 +227,7 @@ td img, a img {
     border-top:1px solid;
 }
 
-:not(.selectize-input).required{
+.required{
     color:#FF0000;
     font-weight:bold;
 }
@@ -671,18 +366,6 @@ label.simplelabel {
     padding:0 1em;
 }
 
-.tbl_line_even,
-.even > td {
-    background-color: #EEEEEE!important;
-    vertical-align: top;
-}
-
-.tbl_line_odd,
-.odd > td {
-    background-color: #E2E5EE!important;
-    vertical-align: top;
-}
-
 .cssform > .fields_list {
     display: block;
 }
@@ -703,21 +386,6 @@ label.simplelabel {
     padding:0 .5em 0 .1em;
 }
 
-.listing tr:hover td,
-.fields_list li:hover,
-.odd:hover > td,
-.even:hover > td {
-    background-color: #DDDDFF!important;
-}
-
-.listing tfoot tr:hover td, tr.checkboxes:hover td {
-    background-color: transparent!important;
-}
-
-.fields_list .selectize-input {
-    min-width: auto;
-}
-
 #member_stateofdue {
     margin: 0 auto .5em;
     width: 85%;
@@ -726,10 +394,6 @@ label.simplelabel {
     text-align: center;
 }
 
-.jqplot-target {
-    display: inline-block;
-}
-
 #ContribsAllTime {
     width: 800px;
 }
diff --git a/ui/semantic/galette/collections/table.overrides b/ui/semantic/galette/collections/table.overrides
new file mode 100644 (file)
index 0000000..9dc8eae
--- /dev/null
@@ -0,0 +1,67 @@
+/*******************************
+         Galette Overrides
+*******************************/
+
+/*----------------------
+     Listing tables
+-----------------------*/
+table.listing td {
+    line-height:1.5em;
+    padding:.1em .2em;
+}
+table.listing.tbl_line_odd,
+table.listing tr.odd > td {
+    background-color: #e2e5ee;
+}
+table.listing tbody .tbl_line_even,
+table.listing tbody tr.even > td {
+    background-color: #eeeeee;
+}
+table.listing tbody tr:hover > td {
+    background-color: @activeLineBackgroundColor !important;
+}
+
+/*-------------------------
+     Membership status
+--------------------------*/
+.ui.ui.table.listing tbody tr > td.cotis-ok {
+    background-color: #DDFFDD;
+}
+.ui.ui.table.listing tbody tr > td.cotis-never {
+    background-color: #EEEEEE;
+}
+.ui.ui.table.listing tbody tr > td.cotis-exempt {
+    background-color: #DDFFDD;
+}
+.ui.ui.table.listing tbody tr > td.cotis-soon {
+    background-color: #FFE9AB;
+}
+.ui.ui.table.listing tbody tr > td.cotis-late,
+.ui.ui.table.listing tbody tr > td.transaction-uncomplete {
+    background-color: #FFDDDD;
+}
+.ui.ui.table.listing tbody tr > td.cotis-lastday {
+    background-color: #FFD9AB;
+}
+.ui.ui.table.listing tbody tr > td.cotis-normal,
+.ui.ui.table.listing tbody tr > td.transaction-normal {
+    background-color: #DDFFDD;
+}
+.ui.ui.table.listing tbody tr > td.cotis-give {
+    background-color: #FFDDDD;
+}
+
+/*------------------
+     Plugins list
+-------------------*/
+th.plugins {
+   padding-top: 1rem;
+   padding-bottom: 1rem;
+   background: #d9f7d8;
+}
+
+th.inactives.plugins {
+    background: #ffead8;
+    border-top: @rowBorder;
+    border-bottom: @rowBorder;
+}
diff --git a/ui/semantic/galette/collections/table.variables b/ui/semantic/galette/collections/table.variables
new file mode 100644 (file)
index 0000000..b4bcb89
--- /dev/null
@@ -0,0 +1,3 @@
+/*******************************
+    Galette Variables
+*******************************/
index dc5e2d9d4dfb5e4f698ac2379b052c0e47835256..667ecdb2df7f103052a00df384576a70539fa753 100644 (file)
@@ -2,12 +2,18 @@
        Galette Overrides
 *******************************/
 
+/*----------------------
+     Color type input
+-----------------------*/
 .ui.form .inline.field > input[type=color] {
   padding: 0;
   width: 4rem;
   height: 2rem;
 }
 
+/*----------------------
+     Search input
+-----------------------*/
 .ui.form .galetteform .ui.search .ui.input {
   &,
   & input {
@@ -15,6 +21,9 @@
   }
 }
 
+/*----------------------
+     Grouped fields
+-----------------------*/
 .ui.form .galetteform .grouped.fields {
   padding-left: .5em;
   padding-right: .5em;
     margin: 0;
   }
 }
+
+/*----------------------
+     Password meter
+-----------------------*/
+.password-strength-text {
+    vertical-align: middle;
+    padding-left: .2em;
+}
+meter {
+    /* Reset the default appearance */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    /* Applicable only to Firefox */
+    background: none;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+meter::-webkit-meter-bar {
+    background: none;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+/* Webkit based browsers */
+meter[value="1"]::-webkit-meter-optimum-value { background: red; }
+meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
+meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
+meter[value="4"]::-webkit-meter-optimum-value { background: green; }
+/* Gecko based browsers */
+meter[value="1"]::-moz-meter-bar { background: red; }
+meter[value="2"]::-moz-meter-bar { background: orange; }
+meter[value="3"]::-moz-meter-bar { background: yellow}
+meter[value="4"]::-moz-meter-bar { background: green ; }
index 1dab374f68c43e2843d4916651b4d948d06b6c4c..8e94d27c68879eea46103d11643f3e7da8e49fb9 100644 (file)
@@ -256,7 +256,7 @@ footer .ui.horizontal.list > .item{
   transform: translateX(-50%) translateY(-50%);
   margin: 30px 0;
 }
-:not(.selectize-input).required .note-editable {
+.required .note-editable {
   font-weight: normal;
 }
 .note-modal .note-modal-footer {
index 7bcd1c11cbf06e7da38e615bcc0948a09c5b6267..f33ef255e241ea9fce5b728f6dcd31c44b8ed2f3 100644 (file)
@@ -47,7 +47,7 @@
 @grid       : 'galette';
 @menu       : 'galette';
 @message    : 'galette';
-@table      : 'default';
+@table      : 'galette';
 
 /* Modules */
 @accordion  : 'galette';