diff options
-rw-r--r-- | tpl/default/addlink.html | 2 | ||||
-rw-r--r-- | tpl/default/configure.html | 185 | ||||
-rw-r--r-- | tpl/default/css/shaarli.css | 115 | ||||
-rw-r--r-- | tpl/default/loginform.html | 2 | ||||
-rw-r--r-- | tpl/default/tools.html | 14 |
5 files changed, 292 insertions, 26 deletions
diff --git a/tpl/default/addlink.html b/tpl/default/addlink.html index 8e64064f..bc328daa 100644 --- a/tpl/default/addlink.html +++ b/tpl/default/addlink.html | |||
@@ -9,7 +9,7 @@ | |||
9 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | 9 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> |
10 | <div id="addlink-form" class="page-form pure-u-lg-1-3 pure-u-3-4"> | 10 | <div id="addlink-form" class="page-form pure-u-lg-1-3 pure-u-3-4"> |
11 | <h2>{"Shaare a new link"|t}</h2> | 11 | <h2>{"Shaare a new link"|t}</h2> |
12 | <form method="GET" action="" name="addform" class="addform"> | 12 | <form method="GET" action="" name="addform" class="addform page-form page-form-light"> |
13 | <div> | 13 | <div> |
14 | <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}"> | 14 | <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}"> |
15 | </div> | 15 | </div> |
diff --git a/tpl/default/configure.html b/tpl/default/configure.html new file mode 100644 index 00000000..0d1bd6ff --- /dev/null +++ b/tpl/default/configure.html | |||
@@ -0,0 +1,185 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html> | ||
3 | <head> | ||
4 | {include="includes"} | ||
5 | </head> | ||
6 | <body> | ||
7 | {include="page.header"} | ||
8 | |||
9 | {$ratioLabel='5-12'} | ||
10 | {$ratioLabelMobile='7-8'} | ||
11 | {$ratioInput='7-12'} | ||
12 | {$ratioInputMobile='1-8'} | ||
13 | |||
14 | <form method="POST" action="#" name="configform" id="configform"> | ||
15 | <div class="pure-g"> | ||
16 | <div class="pure-u-lg-1-6 pure-u-1-8"></div> | ||
17 | <div class="pure-u-lg-2-3 pure-u-3-4 page-form page-form-complete"> | ||
18 | <h2>{'Configure'|t}</h2> | ||
19 | <div class="pure-g"> | ||
20 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> | ||
21 | <div class="form-label"> | ||
22 | <label for="title"> | ||
23 | <span class="label-name">Shaarli {'title'|t}</span> | ||
24 | </label> | ||
25 | </div> | ||
26 | </div> | ||
27 | <div class="pure-u-lg-7-12 pure-u-1"> | ||
28 | <div class="form-input"> | ||
29 | <input type="text" name="title" id="title" size="50" value="{$title}"> | ||
30 | </div> | ||
31 | </div> | ||
32 | </div> | ||
33 | <div class="pure-g"> | ||
34 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> | ||
35 | <div class="form-label"> | ||
36 | <label for="titleLink"> | ||
37 | <span class="label-name">{'Title link'|t}</span><br> | ||
38 | <span class="label-desc">{'Default value'|t}: ?</span> | ||
39 | </label> | ||
40 | </div> | ||
41 | </div> | ||
42 | <div class="pure-u-lg-{$ratioInput} pure-u-1"> | ||
43 | <div class="form-input"> | ||
44 | <input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}"> | ||
45 | </div> | ||
46 | </div> | ||
47 | </div> | ||
48 | <div class="pure-g"> | ||
49 | <div class="pure-u-lg-{$ratioLabel} pure-u-1 "> | ||
50 | <div class="form-label"> | ||
51 | <label> | ||
52 | <span class="label-name">{'Timezone'|t}</span> | ||
53 | </label> | ||
54 | </div> | ||
55 | </div> | ||
56 | <div class="pure-u-lg-{$ratioInput} pure-u-1 "> | ||
57 | <div class="form-input"> | ||
58 | {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore} | ||
59 | <div class="timezone" id="timezone-remove">{$timezone_form}</div> | ||
60 | <div class="timezone" id="timezone-add"></div> | ||
61 | </div> | ||
62 | </div> | ||
63 | </div> | ||
64 | <div class="pure-g"> | ||
65 | <div class="pure-u-lg-{$ratioLabel} pure-u-1 "> | ||
66 | <div class="form-label"> | ||
67 | <label for="redirector"> | ||
68 | <span class="label-name">{'Redirector'|t}</span><br> | ||
69 | <span class="label-desc">{'e. g.'|t} <i>http://anonym.to/?</i> {'will mask the HTTP_REFERER'|t}</span> | ||
70 | </label> | ||
71 | </div> | ||
72 | </div> | ||
73 | <div class="pure-u-lg-{$ratioInput} pure-u-1 "> | ||
74 | <div class="form-input"> | ||
75 | <input type="text" name="redirector" id="redirector" size="50" value="{$redirector}"> | ||
76 | </div> | ||
77 | </div> | ||
78 | </div> | ||
79 | <div class="pure-g"> | ||
80 | <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} "> | ||
81 | <div class="form-label"> | ||
82 | <label for="disablesessionprotection"> | ||
83 | <span class="label-name">{'Disable session cookie hijacking protection'|t}</span><br> | ||
84 | <span class="label-desc"> | ||
85 | {'Check this if you get disconnected or if your IP address changes often'|t} | ||
86 | </span> | ||
87 | </label> | ||
88 | </div> | ||
89 | </div> | ||
90 | <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} "> | ||
91 | <div class="form-input"> | ||
92 | <input type="checkbox" name="disablesessionprotection" id="disablesessionprotection" | ||
93 | {if="$session_protection_disabled"}checked{/if}> | ||
94 | </div> | ||
95 | </div> | ||
96 | </div> | ||
97 | <div class="pure-g"> | ||
98 | <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} "> | ||
99 | <div class="form-label"> | ||
100 | <label for="privateLinkByDefault"> | ||
101 | <span class="label-name">{'Private links by default'|t}</span><br> | ||
102 | <span class="label-desc">{'All new links are private by default'|t}</span> | ||
103 | </label> | ||
104 | </div> | ||
105 | </div> | ||
106 | <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} "> | ||
107 | <div class="form-input"> | ||
108 | <input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault" | ||
109 | {if="$private_links_default"}checked{/if}/> | ||
110 | </div> | ||
111 | </div> | ||
112 | </div> | ||
113 | <div class="pure-g"> | ||
114 | <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} "> | ||
115 | <div class="form-label"> | ||
116 | <label for="enableRssPermalinks"> | ||
117 | <span class="label-name">{'RSS direct links'|t}</span><br> | ||
118 | <span class="label-desc">{'Check this to use direct URL instead of permalink in feeds'|t}</span> | ||
119 | </label> | ||
120 | </div> | ||
121 | </div> | ||
122 | <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} "> | ||
123 | <div class="form-input"> | ||
124 | <input type="checkbox" name="enableRssPermalinks" id="enableRssPermalinks" | ||
125 | {if="$enable_rss_permalinks"}checked{/if}/> | ||
126 | </div> | ||
127 | </div> | ||
128 | </div> | ||
129 | <div class="pure-g"> | ||
130 | <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}"> | ||
131 | <div class="form-label"> | ||
132 | <label for="hidePublicLinks"> | ||
133 | <span class="label-name">{'Hide public links'|t}</span><br> | ||
134 | <span class="label-desc">{'Do not show any links if the user is not logged in'|t}</span> | ||
135 | </label> | ||
136 | </div> | ||
137 | </div> | ||
138 | <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}"> | ||
139 | <div class="form-input"> | ||
140 | <input type="checkbox" name="hidePublicLinks" id="hidePublicLinks" | ||
141 | {if="$hide_public_links"}checked{/if}/> | ||
142 | </div> | ||
143 | </div> | ||
144 | </div> | ||
145 | <div class="pure-g"> | ||
146 | <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}"> | ||
147 | <div class="form-label"> | ||
148 | <label for="hidePublicLinks"> | ||
149 | <span class="label-name">{'Check updates'|t}</span><br> | ||
150 | <span class="label-desc">{'Notify me when a new release is ready'|t}</span> | ||
151 | </label> | ||
152 | </div> | ||
153 | </div> | ||
154 | <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}"> | ||
155 | <div class="form-input"> | ||
156 | <input type="checkbox" name="updateCheck" id="updateCheck" | ||
157 | {if="$enable_update_check"}checked{/if}/> | ||
158 | </div> | ||
159 | </div> | ||
160 | </div> | ||
161 | <div class="center"> | ||
162 | <input type="submit" value="{'Save'|t}" name="save"> | ||
163 | </div> | ||
164 | </div> | ||
165 | </div> | ||
166 | <input type="hidden" name="token" value="{$token}"> | ||
167 | </form> | ||
168 | |||
169 | {include="page.footer"} | ||
170 | |||
171 | <script> | ||
172 | (function (window, document) { | ||
173 | var toRemove = document.getElementById('timezone-remove'); | ||
174 | var firstSelect = toRemove.getElementsByTagName('select')[0]; | ||
175 | var secondSelect = toRemove.getElementsByTagName('select')[1]; | ||
176 | toRemove.parentNode.removeChild(toRemove); | ||
177 | var toAdd = document.getElementById('timezone-add'); | ||
178 | var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>'; | ||
179 | newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>'; | ||
180 | toAdd.innerHTML = newTimezone; | ||
181 | })(this, this.document); | ||
182 | </script> | ||
183 | </body> | ||
184 | </html> | ||
185 | |||
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index 2f2f142d..339ba300 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css | |||
@@ -15,6 +15,7 @@ body { | |||
15 | 15 | ||
16 | .center { | 16 | .center { |
17 | text-align: center; | 17 | text-align: center; |
18 | margin: auto; | ||
18 | } | 19 | } |
19 | 20 | ||
20 | .label { | 21 | .label { |
@@ -597,7 +598,7 @@ pre { | |||
597 | } | 598 | } |
598 | 599 | ||
599 | /** | 600 | /** |
600 | * Login page | 601 | * PAGE FORM |
601 | */ | 602 | */ |
602 | .page-form { | 603 | .page-form { |
603 | margin: 20px 0 0 0; | 604 | margin: 20px 0 0 0; |
@@ -617,14 +618,6 @@ pre { | |||
617 | border-bottom: 1px solid #797979; | 618 | border-bottom: 1px solid #797979; |
618 | } | 619 | } |
619 | 620 | ||
620 | .page-form div, .page-form p { | ||
621 | text-align: center; | ||
622 | } | ||
623 | |||
624 | .page-form p { | ||
625 | color: #b0ddce; | ||
626 | } | ||
627 | |||
628 | .page-form input[type="text"], .page-form input[type="password"] { | 621 | .page-form input[type="text"], .page-form input[type="password"] { |
629 | margin: 10px 0; | 622 | margin: 10px 0; |
630 | padding: 5px 5px 3px 15px; | 623 | padding: 5px 5px 3px 15px; |
@@ -643,12 +636,6 @@ pre { | |||
643 | color: #b0ddce; | 636 | color: #b0ddce; |
644 | } | 637 | } |
645 | 638 | ||
646 | #login-form .remember-me { | ||
647 | margin: 5px 0; | ||
648 | color: #b0ddce; | ||
649 | font-weight: bold; | ||
650 | } | ||
651 | |||
652 | .page-form input[type="submit"] { | 639 | .page-form input[type="submit"] { |
653 | margin: 10px 0; | 640 | margin: 10px 0; |
654 | height: 35px; | 641 | height: 35px; |
@@ -662,11 +649,109 @@ pre { | |||
662 | color: #b0ddce; | 649 | color: #b0ddce; |
663 | } | 650 | } |
664 | 651 | ||
652 | .page-form select { | ||
653 | color: black; | ||
654 | } | ||
655 | /** | ||
656 | * PAGE FORM - LIGHT | ||
657 | */ | ||
658 | .page-form-light div, .page-form-light p { | ||
659 | text-align: center; | ||
660 | } | ||
661 | |||
662 | .page-form-light p { | ||
663 | color: #b0ddce; | ||
664 | } | ||
665 | |||
666 | /** | ||
667 | * PAGE FORM - COMPLETE | ||
668 | */ | ||
669 | .page-form-complete { | ||
670 | #background: #ddd; | ||
671 | } | ||
672 | |||
673 | .page-form-complete div, .page-form-complete p { | ||
674 | color: #b0ddce; | ||
675 | } | ||
676 | |||
677 | .page-form-complete .form-label, .page-form-complete .form-input { | ||
678 | position: relative; | ||
679 | height: 60px; | ||
680 | } | ||
681 | |||
682 | .page-form-complete .form-label label, | ||
683 | .page-form-complete .form-input input, | ||
684 | .page-form-complete .timezone { | ||
685 | position: absolute; | ||
686 | top: 50%; | ||
687 | transform: translateY(-50%); | ||
688 | } | ||
689 | |||
690 | .page-form-complete .form-label label { | ||
691 | text-align: right; | ||
692 | right: 0; | ||
693 | padding: 0 20px; | ||
694 | } | ||
695 | |||
696 | .page-form-complete .label-name { | ||
697 | font-weight: bold; | ||
698 | } | ||
699 | |||
700 | .page-form-complete .label-desc { | ||
701 | font-size: 0.7em; | ||
702 | } | ||
703 | |||
704 | @media screen and (max-width: 64em) { | ||
705 | .page-form-complete .form-label { | ||
706 | height: inherit; | ||
707 | } | ||
708 | |||
709 | .page-form-complete .form-label label, | ||
710 | .page-form-complete .form-input input, | ||
711 | .page-form-complete .timezone { | ||
712 | position: inherit; | ||
713 | top: inherit; | ||
714 | transform: translateY(0); | ||
715 | } | ||
716 | |||
717 | .page-form-complete .form-input input[type="checkbox"] { | ||
718 | position: absolute; | ||
719 | top: 50%; | ||
720 | right: 50%; | ||
721 | transform: translateY(-50%); | ||
722 | } | ||
723 | |||
724 | .page-form-complete .form-input { | ||
725 | text-align: center; | ||
726 | } | ||
727 | |||
728 | .page-form-complete .form-label label { | ||
729 | display: block; | ||
730 | text-align: left; | ||
731 | margin: 10px 0 0 0; | ||
732 | } | ||
733 | |||
734 | .timezone-continent:after { | ||
735 | content:"\a\a"; | ||
736 | white-space: pre; | ||
737 | } | ||
738 | } | ||
739 | |||
740 | |||
665 | #page404 { | 741 | #page404 { |
666 | color: #3f3f3f; | 742 | color: #3f3f3f; |
667 | } | 743 | } |
668 | 744 | ||
669 | /** | 745 | /** |
746 | * LOGIN | ||
747 | */ | ||
748 | #login-form .remember-me { | ||
749 | margin: 5px 0; | ||
750 | color: #b0ddce; | ||
751 | font-weight: bold; | ||
752 | } | ||
753 | |||
754 | /** | ||
670 | * CONTENT - LINKLIST ITEMS | 755 | * CONTENT - LINKLIST ITEMS |
671 | */ | 756 | */ |
672 | .linklist-item { | 757 | .linklist-item { |
diff --git a/tpl/default/loginform.html b/tpl/default/loginform.html index f28e6a47..21923606 100644 --- a/tpl/default/loginform.html +++ b/tpl/default/loginform.html | |||
@@ -18,7 +18,7 @@ | |||
18 | {else} | 18 | {else} |
19 | <div class="pure-g"> | 19 | <div class="pure-g"> |
20 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | 20 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> |
21 | <div id="login-form" class="page-form pure-u-lg-1-3 pure-u-3-4"> | 21 | <div id="login-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-3-4"> |
22 | <form method="post" name="loginform"> | 22 | <form method="post" name="loginform"> |
23 | <h2>{'Login'|t}</h2> | 23 | <h2>{'Login'|t}</h2> |
24 | <div> | 24 | <div> |
diff --git a/tpl/default/tools.html b/tpl/default/tools.html index a2132bd5..96e7fb10 100644 --- a/tpl/default/tools.html +++ b/tpl/default/tools.html | |||
@@ -8,8 +8,8 @@ | |||
8 | 8 | ||
9 | <div class="pure-g"> | 9 | <div class="pure-g"> |
10 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | 10 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> |
11 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form"> | 11 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form page-form-light"> |
12 | <h2>Settings</h2> | 12 | <h2>{'Settings'|t}</h2> |
13 | <div class="tools-item"> | 13 | <div class="tools-item"> |
14 | <a href="?do=configure" title="{'Change Shaarli settings: title, timezone, etc.'|t}"> | 14 | <a href="?do=configure" title="{'Change Shaarli settings: title, timezone, etc.'|t}"> |
15 | <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Configure your Shaarli'|t}</span> | 15 | <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Configure your Shaarli'|t}</span> |
@@ -52,13 +52,11 @@ | |||
52 | {/loop} | 52 | {/loop} |
53 | 53 | ||
54 | <div class="clear"></div> | 54 | <div class="clear"></div> |
55 | |||
56 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | ||
57 | </div> | 55 | </div> |
58 | 56 | ||
59 | <div class="pure-g"> | 57 | <div class="pure-g"> |
60 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | 58 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> |
61 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form"> | 59 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form page-form-light"> |
62 | <h2>Bookmarklets</h2> | 60 | <h2>Bookmarklets</h2> |
63 | <p> | 61 | <p> |
64 | {'Drag one of these button to your bookmarks toolbar or right-click it and "Bookmark This Link"'|t}, | 62 | {'Drag one of these button to your bookmarks toolbar or right-click it and "Bookmark This Link"'|t}, |
@@ -92,12 +90,11 @@ | |||
92 | </a> | 90 | </a> |
93 | </div> | 91 | </div> |
94 | </div> | 92 | </div> |
95 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | ||
96 | </div> | 93 | </div> |
97 | 94 | ||
98 | <div class="pure-g"> | 95 | <div class="pure-g"> |
99 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | 96 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> |
100 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form"> | 97 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form page-form-light"> |
101 | <h2>Firefox Social API</h2> | 98 | <h2>Firefox Social API</h2> |
102 | <p>{'You need to browse your Shaarli over <strong>HTTPS</strong> to use this functionality.'|t}</p> | 99 | <p>{'You need to browse your Shaarli over <strong>HTTPS</strong> to use this functionality.'|t}</p> |
103 | 100 | ||
@@ -108,12 +105,11 @@ | |||
108 | </a> | 105 | </a> |
109 | </div> | 106 | </div> |
110 | </div> | 107 | </div> |
111 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | ||
112 | </div> | 108 | </div> |
113 | 109 | ||
114 | <div class="pure-g"> | 110 | <div class="pure-g"> |
115 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> | 111 | <div class="pure-u-lg-1-3 pure-u-1-8"></div> |
116 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form"> | 112 | <div class="pure-u-lg-1-3 pure-u-3-4 page-form page-form-light"> |
117 | <h2>{'3rd party'|t}</h2> | 113 | <h2>{'3rd party'|t}</h2> |
118 | <div class="tools-item"> | 114 | <div class="tools-item"> |
119 | <a href="https://addons.mozilla.org/fr/firefox/addon/shaarli/" title="Firefox {'Plugin'|t}"> | 115 | <a href="https://addons.mozilla.org/fr/firefox/addon/shaarli/" title="Firefox {'Plugin'|t}"> |