aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources
diff options
context:
space:
mode:
authorSimounet <contact@simounet.net>2017-12-28 22:54:42 +0100
committerNicolas LÅ“uillet <nicolas@loeuillet.org>2018-01-12 10:07:46 +0100
commit2831e77cce6eae213c0cec8f5a90a6a00c383633 (patch)
tree9cbde1e77585469348022f2c99afcf0980957d1b /app/Resources
parent63771b9ae31a8df8050677b53e64f7cf17924c27 (diff)
downloadwallabag-2831e77cce6eae213c0cec8f5a90a6a00c383633.tar.gz
wallabag-2831e77cce6eae213c0cec8f5a90a6a00c383633.tar.zst
wallabag-2831e77cce6eae213c0cec8f5a90a6a00c383633.zip
Nav close button alignment and nav boxes improved
Diffstat (limited to 'app/Resources')
-rw-r--r--app/Resources/static/themes/material/css/nav.scss58
-rwxr-xr-xapp/Resources/static/themes/material/index.js14
2 files changed, 31 insertions, 41 deletions
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
index d2e14e69..147f163f 100644
--- a/app/Resources/static/themes/material/css/nav.scss
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -2,8 +2,7 @@
2/* ========================================================================== 2/* ==========================================================================
3 Nav 3 Nav
4 ========================================================================== */ 4 ========================================================================== */
5nav, 5nav {
6.nav-wrapper {
7 height: auto; 6 height: auto;
8 line-height: initial; 7 line-height: initial;
9} 8}
@@ -18,25 +17,25 @@ nav {
18 } 17 }
19} 18}
20 19
21.nav-wrapper { 20.nav-panel-item .button-collapse {
21 margin-left: 0;
22 margin-right: 0.5rem;
23 padding: 0 0.5rem;
24 height: auto;
25 line-height: 1;
26 background-color: transparent;
27 border: none;
28}
29
30.nav-panel-item {
22 display: flex; 31 display: flex;
23 padding: 0.6rem 0.4rem 0.6rem 0.75rem; 32 padding: 0.6rem 0.4rem 0.6rem 0.75rem;
24 flex-wrap: wrap; 33 flex-wrap: wrap;
25 justify-content: space-between; 34 justify-content: space-between;
26 align-items: center; 35 align-items: center;
27
28 .button-collapse {
29 margin-left: 0;
30 margin-right: 0.5rem;
31 padding: 0 0.5rem;
32 height: auto;
33 line-height: 1;
34 background-color: transparent;
35 border: none;
36 }
37} 36}
38 37
39nav .nav-wrapper i { 38.nav-panel-item .material-icons {
40 height: 46px; 39 height: 46px;
41 line-height: 46px; 40 line-height: 46px;
42} 41}
@@ -51,8 +50,8 @@ nav .nav-wrapper i {
51 justify-content: flex-end; 50 justify-content: flex-end;
52} 51}
53 52
54.nav-panel-add .add, 53.nav-panel-item .add,
55.nav-panel-search .search, 54.nav-panel-item .search,
56.nav-panels .close { 55.nav-panels .close {
57 color: #444 !important; 56 color: #444 !important;
58} 57}
@@ -68,7 +67,6 @@ nav .nav-wrapper i {
68 .input-field input { 67 .input-field input {
69 display: block; 68 display: block;
70 line-height: inherit; 69 line-height: inherit;
71 width: calc(100% - 8rem);
72 height: 3rem; 70 height: 3rem;
73 } 71 }
74 72
@@ -86,39 +84,32 @@ nav .nav-wrapper i {
86} 84}
87 85
88.input-field { 86.input-field {
89 &.nav-panel-add label, 87 &.nav-panel-item label {
90 &.nav-panel-search label {
91 left: 1rem; 88 left: 1rem;
92 } 89 }
93 90
94 &.nav-panel-add .close, 91 &.nav-panel-item .close {
95 &.nav-panel-search .close {
96 position: absolute;
97 top: 0;
98 right: 1rem;
99 color: transparent; 92 color: transparent;
100 cursor: pointer; 93 cursor: pointer;
101 font-size: 2rem; 94 font-size: 2rem;
102 transition: 0.3s color; 95 transition: 0.3s color;
103 } 96 }
104 97
105 &.nav-panel-add, 98 &.nav-panel-item {
106 &.nav-panel-add form,
107 &.nav-panel-search,
108 &.nav-panel-search form {
109 display: flex; 99 display: flex;
110 flex: 1; 100 flex: 1;
101 flex-wrap: nowrap;
111 align-items: center; 102 align-items: center;
112 } 103 }
113 104
114 &.nav-panel-add form.disabled, 105 &.nav-panel-add.disabled,
115 &.nav-panel-add form.disabled input { 106 &.nav-panel-add.disabled input {
116 background-color: whitesmoke; 107 background-color: whitesmoke;
117 } 108 }
118} 109}
119 110
120.nav-form-button { 111.nav-form-button {
121 padding: 0 1rem; 112 padding: 0;
122 background-color: transparent; 113 background-color: transparent;
123 border: none; 114 border: none;
124 115
@@ -127,6 +118,11 @@ nav .nav-wrapper i {
127 } 118 }
128} 119}
129 120
121.nav-form-button,
122.nav-panel-item .close {
123 margin: 0 1%;
124}
125
130#button_filters { 126#button_filters {
131 display: none; 127 display: none;
132} 128}
diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index 36505d71..bdccc534 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -42,24 +42,20 @@ $(document).ready(() => {
42 return false; 42 return false;
43 }); 43 });
44 $('#nav-btn-add').on('click', () => { 44 $('#nav-btn-add').on('click', () => {
45 $('.nav-panel-buttom').hide(100); 45 $('.nav-panel-actions').hide(100);
46 $('.nav-panel-add').show(100); 46 $('.nav-panel-add').show(100);
47 $('.nav-panels .action').hide(100);
48 $('.nav-panel-menu').addClass('hidden');
49 $('.nav-panels').css('background', 'white'); 47 $('.nav-panels').css('background', 'white');
50 $('#entry_url').focus(); 48 $('#entry_url').focus();
51 return false; 49 return false;
52 }); 50 });
53 const materialAddForm = $('.nav-panel-add form[name=entry]'); 51 const materialAddForm = $('.nav-panel-add');
54 materialAddForm.on('submit', () => { 52 materialAddForm.on('submit', () => {
55 materialAddForm.addClass('disabled'); 53 materialAddForm.addClass('disabled');
56 $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur'); 54 $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
57 }); 55 });
58 $('#nav-btn-search').on('click', () => { 56 $('#nav-btn-search').on('click', () => {
59 $('.nav-panel-buttom').hide(100); 57 $('.nav-panel-actions').hide(100);
60 $('.nav-panel-search').show(100); 58 $('.nav-panel-search').show(100);
61 $('.nav-panels .action').hide(100);
62 $('.nav-panel-menu').addClass('hidden');
63 $('.nav-panels').css('background', 'white'); 59 $('.nav-panels').css('background', 'white');
64 $('#search_entry_term').focus(); 60 $('#search_entry_term').focus();
65 return false; 61 return false;
@@ -67,9 +63,7 @@ $(document).ready(() => {
67 $('.close').on('click', () => { 63 $('.close').on('click', () => {
68 $('.nav-panel-add').hide(100); 64 $('.nav-panel-add').hide(100);
69 $('.nav-panel-search').hide(100); 65 $('.nav-panel-search').hide(100);
70 $('.nav-panel-buttom').show(100); 66 $('.nav-panel-actions').show(100);
71 $('.nav-panels .action').show(100);
72 $('.nav-panel-menu').removeClass('hidden');
73 $('.nav-panels').css('background', 'transparent'); 67 $('.nav-panels').css('background', 'transparent');
74 return false; 68 return false;
75 }); 69 });