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

Improve the homepage (style and translations)

Browse Source
This commit is contained in:
yflory
2017-02-09 18:53:04 +01:00
parent d54262c8df
commit 6026351091
15 changed files with 371 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
customize.dist/src/fragments/footer.html
View File

@@ -3,20 +3,20 @@
<div class="row">
<div class="col">
<ul class="list-unstyled">
<li>CryptPad<li>
<li><a href="/about" data-localization="about"></a></li>
<li><a href="/terms" data-localization="terms"></a></li>
<li><a href="/privacy" data-localization="privacy"></a></li>
<li>CryptPad</li>
<li><a href="/about.html" data-localization="about"></a></li>
<li><a href="/terms.html" data-localization="terms"></a></li>
<li><a href="/privacy.html" data-localization="privacy"></a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li data-localization="footer_applications"><li>
<li><a href="/pad/" data-localization="main_richText"></a></li>
<li><a href="#" data-localization="main_code"></a></li>
<li><a href="#" data-localization="main_slide"></a></li>
<li><a href="#" data-localization="main_poll"></a></li>
<li><a href="#" data-localization="main_drive"></a></li>
<li><a href="/code/" data-localization="main_code"></a></li>
<li><a href="/slide/" data-localization="main_slide"></a></li>
<li><a href="/poll/" data-localization="main_poll"></a></li>
<li><a href="/drive/" data-localization="main_drive"></a></li>
</ul>
</div>
<div class="col">
@@ -33,7 +33,7 @@
<li><a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" target="_blank" rel="noopener noreferrer">IRC</a></li>
<li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="/contact">Email</a></li>
<li><a href="/contact.html">Email</a></li>
</ul>
</div>
</div>

22
customize.dist/src/fragments/index.html
View File

@@ -2,25 +2,20 @@
<div id="main">
<div class="mainOverlay"></div>
<div id="align-container">
<div id="main-container">
<div id="data" class="hidden">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<div id="buttons" class="buttons"><button class="btn btn-secondary nologin" data-localization="login_nologin"></button></div>
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
</div>
<div id="userForm" class="form-group hidden">
<!--<center>
<h1 data-localization="form_title"></h1>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus><br>
<!--<label for="password" data-localization="form_password"></label>-->
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><br>
<input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus>
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password">
<div style="display: none;"><span class="remember form-check"><label for="rememberme" class="form-check-label" data-localization-append="login_remember"><input type="checkbox" id="rememberme" class="form-check-input" checked="checked"></label></span><br></div>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-success register half" data-localization="login_register"></button>
<p class="separator" data-localization="login_orNoLogin"></p>
<p id="buttons" class="buttons"></p>
<p class="driveLink"><a class="nologin" href="/drive/" data-localization="login_nologin"></a></p>
</div>
<div id="loggedIn" class="hidden">
<p id="loggedInHello"></p>
@@ -28,6 +23,7 @@
<p><button id="loggedInLogOut" class="btn btn-secondary" data-localization="logoutButton"></button></p>
</div>
</div>
</div>
</div>
<div class="page category first" id="knowmore">
<center>

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

@@ -96,16 +96,15 @@ h6 {
a {
cursor: pointer;
color: @cp-light-blue;
//#41b7d8; //@cp-darkblue;
color: @cp-link;
text-decoration: none;
&:hover {
color: darken(@cp-light-blue, 10%); //@cp-accent2;
color: @cp-link-hover;
}
&:visited {
color: @cp-purple;
color: @cp-link-visited;
}
}
@@ -179,7 +178,7 @@ body.html {
//background: darken(@base, 1%);
}
&.category {
background: darken(@base, 3%);
background: @category-bg;
}
.app {
@@ -233,7 +232,7 @@ body.html {
p {
font-size: 18px;
text-align: justify;
//text-align: justify;
}
}
@@ -313,7 +312,7 @@ body.html {
font-size: medium;
#main-container {
#align-container {
position: absolute;
top: 50%;
left: 50%;
@@ -325,11 +324,20 @@ body.html {
max-width: 90%;
}
#main-container {
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
#data {
p {
margin: 0;
padding: 0;
font-size: 20px;
font-size: 28px;
line-height: 1.5em;
}
h1, h2 {
@@ -337,6 +345,7 @@ body.html {
font-size: 48px;
line-height: 1.2em;
color: @main-color;
padding: 0;
}
h5 {
@@ -346,13 +355,9 @@ body.html {
width: 600px;
max-width: 60%;
color: @main-color;
padding: 15px;
padding: 0 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
#tryit {
margin-top: 20px;
@@ -361,15 +366,11 @@ body.html {
}
#loggedIn {
float: right;
color: @main-color;
display: inline-block;
position: absolute;
top: 50%;
right: 0;
margin-left: 50px;
width: 350px;
max-width: 35%;
transform: translateY(-50%);
text-align: center;
font-weight: bold;
button {
@@ -386,11 +387,7 @@ body.html {
}
#userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 50px;
float: right;
display: inline-block;
width: 350px;
max-width: 35%;
@@ -399,42 +396,13 @@ body.html {
font-family: lato, Helvetica, sans-serif;
color: @main-color;
h1 {
color: @main-color;
padding: 0;
}
[type="text"], [type="password"] {
width: 100%;
}
label {
margin-bottom: 0;
}
/*.remember {
vertical-align: middle;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
}
[type="checkbox"] {
vertical-align: text-top;
margin: 0;
//margin-top: 10px;
margin-right: 5px;
}
*/
[type="checkbox"] {
margin-right: 5px;
}
button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
cursor: pointer;
&.half {
width: ~"calc(50% - 2px)";
@@ -443,18 +411,65 @@ body.html {
}
}
}
p {
margin: 0;
padding: 0;
&.buttons {
margin-bottom: 10px;
.dropdown-bar {
button {
white-space: normal;
text-align: left;
.fa {
float: right;
}
}
display: block;
}
}
&.separator {
margin: 5px 0 15px 0;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
a {
color: @main-color;
font-weight:bold;
&:hover, :visited {
color: @main-color !important;
}
}
}
.driveLink {
padding-left: 1rem; //Bootstrap padding in buttons
font-size: 1em;
}
&> * {
margin-bottom: 10px;
}
}
#main-container {
@media screen and (max-width: @media-not-big) {
@media screen and (max-width: @media-not-big) {
#align-container {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
}
#userForm, #loggedIn, #data {
@media screen and (max-width: @media-not-big) {
#main-container {
position: relative;
transform: unset;
top:0;
}
#data {
text-align: center;
}
#userForm, #loggedIn, #data {
transform: initial;
position: relative;
display: block;
@@ -462,34 +477,19 @@ body.html {
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
float: none;
}
}
#userForm, #loggedIn {
@media screen and (max-width: @media-not-big) {
border: 1px solid #888;
#userForm, #loggedIn {
//border: 1px solid #888;
}
}
@media screen and (max-width: @media-not-big) {
position: relative;
height: auto;
top: -10px;
}
.buttons {
margin-top: 15px;
}
}
p.buttons, div.buttons {
text-align: center;
button {
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
.dropdown-bar {
margin-left: 4px;
}
}
#fileManagerIframe {
width: 100%;

11
customize.dist/src/less/footer.less
View File

@@ -1,20 +1,21 @@
@import "./variables.less";
.cp footer {
background: @dark-base;
background: @category-bg;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
padding-top: 1em;
font-size: 1.2em;
a {
color: #555;
color: @cp-link;
&:visited {
color: #777;
color: @cp-link-visited;
}
&:hover {
color: #333;
color: @cp-link-hover;
}
}
li:first-child {
font-size: 1.2em;
font-weight: bold;
text-decoration: underline;
}
}

6
customize.dist/src/less/topbar.less
View File

@@ -50,11 +50,15 @@
a {
font-weight: 500;
font-size: 0.75em;
color: @cp-purple;
color: @cp-link;
&:hover {
color: @cp-link-hover;
text-decoration: underline;
}
&:visited {
color: @cp-link-visited;
}
}
}
}

6
customize.dist/src/less/variables.less
View File

@@ -24,6 +24,11 @@
@page-white: #fafafa;
// links
@cp-link: @cp-light-blue;
@cp-link-visited: @cp-light-blue;
@cp-link-hover: darken(@cp-light-blue, 10%) !important;
// alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@@ -88,3 +93,4 @@
@main-color: #fff;
@main-bg: url('/customize/bg3.jpg') no-repeat center center;
@category-bg: #f4f4f4;