web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix the new userlist button and make the toolbar responsive

Browse Source
This commit is contained in:
yflory
2016-10-13 14:24:44 +02:00
parent 24fbe22c9d
commit 39bbf8a6c1
18 changed files with 221 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
customize.dist/Header.html
View File

@@ -8,14 +8,16 @@
<option value="fr">Français</option>
</select>
</span>
<p data-localization="header_france">
<p data-localization="header_france" class="big">
</p>
</div>
<div class="bottom-bar-center">
<p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
<p><a id="cryptpad-logo" class="big" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
<p><a id="cryptpad-logo" class="small" href="/" data-localization-title="header_logoTitle"><img src="/customize/cryptofist_mini.png" alt="Cryptpad" class="cryptofist" /></a></p>
</div>
<div class="bottom-bar-right">
<p data-localization="header_support">
<p data-localization="header_xwiki" class="small">
<p data-localization="header_support" class="big">
</p>
</div>
</div>

BIN
customize.dist/cryptofist_mini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

29
customize.dist/main.css
View File

@@ -146,6 +146,7 @@ tr {
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
padding: 4px 12px 4px 12px;
@@ -242,6 +243,34 @@ tbody td:last-child {
margin-right: 4px;
position: relative;
}
@media screen and (max-width: 800px) {
.top-bar .big,
.bottom-bar .big {
display: none;
}
}
@media screen and (min-width: 801px) {
.top-bar .big,
.bottom-bar .big {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.top-bar .small,
.bottom-bar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.top-bar .small,
.bottom-bar .small {
display: none;
}
}
.top-bar .small img,
.bottom-bar .small img {
height: 1.25em;
}
.bottom-bar {
bottom: 0px;
right: 0px;

22
customize.dist/src/cryptpad.less
View File

@@ -175,6 +175,7 @@ p, pre, td, a, table, tr {
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
@@ -278,6 +279,27 @@ tbody {
margin-right: 4px;
position: relative;
}
.big {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
img {
height: 1.25em;
}
}
}
.bottom-bar {
bottom: 0px;

55
customize.dist/src/toolbar.less
View File

@@ -25,16 +25,18 @@
}
div {
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
white-space: normal;
&.cryptpad-back {
padding: 0;
font-weight: bold;
cursor: pointer;
color: #000;
}
&.cryptpad-lag {
float: right;
line-height: 26px;
margin: 2px 0px 2px 4px;
}
}
button, .rightside-element {
@@ -71,6 +73,10 @@
}
}
.cryptpad-state {
line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
}
.rightside-button {
float: right;
cursor: pointer;
@@ -84,7 +90,9 @@
.rightside-element {
vertical-align: middle;
white-space: nowrap;
//float: right;
&.float {
float: right;
}
}
select {
@@ -99,7 +107,7 @@
.cryptpad-toolbar-leftside {
float: left;
max-width: 35%;
margin-bottom: -1px;
.cryptpad-dropdown-container {
position: relative;
display: inline-block;
@@ -113,28 +121,55 @@
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
height: auto;
padding: 5px;
white-space: normal;
p {
width: 210px;
padding: 0;
margin: 0;
white-space: normal;
&.cryptpad-dropdown-users {
text-align:baseline;
.yourself {
font-style: italic;
}
.anonymous {
font-style: italic;
}
}
h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
}
}
button {
margin: 2px 0px;
}
}
}
button {
margin: 2px 4px 2px 0px;
}
.cryptpad-userbuttons-container {
display: none;
}
}
.cryptpad-toolbar-rightside {
text-align: right;
margin-right: 30px;
//float: right;
}
.cryptpad-lag {
float: right;
}
.cryptpad-spinner {
float: left;
display: inline-block;
height: 26px;
margin: 2px;
line-height: 26px;
font-size: 20px;
}
.cryptpad-readonly {
margin-right: 20px;

53
customize.dist/toolbar.css
View File

@@ -24,10 +24,7 @@
float: right;
}
.cryptpad-toolbar div {
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
white-space: normal;
}
.cryptpad-toolbar div.cryptpad-back {
padding: 0;
@@ -35,6 +32,11 @@
cursor: pointer;
color: #000;
}
.cryptpad-toolbar div.cryptpad-lag {
float: right;
line-height: 26px;
margin: 2px 0px 2px 4px;
}
.cryptpad-toolbar button,
.cryptpad-toolbar .rightside-element {
height: 26px;
@@ -72,6 +74,10 @@
display: none;
}
}
.cryptpad-toolbar .cryptpad-state {
line-height: 30px;
/* equivalent to 26px + 2*2px margin used for buttons */
}
.cryptpad-toolbar .rightside-button {
float: right;
cursor: pointer;
@@ -84,6 +90,9 @@
vertical-align: middle;
white-space: nowrap;
}
.cryptpad-toolbar .rightside-element.float {
float: right;
}
.cryptpad-toolbar select {
border: 0px;
margin-left: 5px;
@@ -94,7 +103,7 @@
}
.cryptpad-toolbar-leftside {
float: left;
max-width: 35%;
margin-bottom: -1px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
position: relative;
@@ -110,24 +119,52 @@
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
height: auto;
padding: 5px;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p {
width: 210px;
padding: 0;
margin: 0;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users {
text-align: baseline;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button {
margin: 2px 0px;
}
.cryptpad-toolbar-leftside button {
margin: 2px 4px 2px 0px;
}
.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
display: none;
}
.cryptpad-toolbar-rightside {
text-align: right;
}
.cryptpad-lag {
float: right;
margin-right: 30px;
}
.cryptpad-spinner {
float: left;
display: inline-block;
height: 26px;
margin: 2px;
line-height: 26px;
font-size: 20px;
}
.cryptpad-readonly {
margin-right: 20px;

7
customize.dist/translations/messages.fr.js
View File

@@ -22,12 +22,12 @@ define(function () {
out.reconnecting = 'Reconnexion...';
out.lag = 'Latence';
out.readonly = 'Lecture seule';
out.anonymous = "nonyme";
out.anonymous = "Anonyme";
out.yourself = "Vous-même";
out.anonymousUsers = "utilisateurs anonymes";
out.anonymousUser = "utilisateur anonyme";
out.viewUsersIcon = "UTILISATEURS EN LECTURE SEULE";
out.editUsersIcon = "UTILISATEURS ÉDITANT LE DOCUMENT";
out.share = "Partage";
out.users = "Utilisateurs";
out.greenLight = "Tout fonctionne bien";
out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
@@ -202,6 +202,7 @@ define(function () {
// Header.html
out.header_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" title="France" alt="France" src="/customize/fr.png" /> par <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_xwiki = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer"><img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
out.header_logoTitle = "Aller vers la page d'accueil";

5
customize.dist/translations/messages.js
View File

@@ -26,8 +26,8 @@ define(function () {
out.yourself = "Yourself";
out.anonymousUsers = "anonymous users";
out.anonymousUser = "anonymous user";
out.viewUsersIcon = "PEOPLE VIEWING";
out.editUsersIcon = "PEOPLE EDITING";
out.share = "Share";
out.users = "Users";
out.greenLight = "Everything is working fine";
out.orangeLight = "Your slow connection may impact your experience";
@@ -204,6 +204,7 @@ define(function () {
// Header.html
out.header_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">With <img class="bottom-bar-heart" src="/customize/heart.png" /> from <img class="bottom-bar-fr" src="/customize/fr.png" title="France" alt="France"/> by <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_xwiki = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer"><img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
out.header_logoTitle = 'Go to the main page';