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

Make the home page responsive

Browse Source
This commit is contained in:
yflory 2017-01-19 10:48:46 +01:00
parent 69bee7d79a
commit 9523782bf8
8 changed files with 164 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
customize.dist/about.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" /> <link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

1
customize.dist/contact.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" /> <link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

1
customize.dist/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" /> <link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

74
customize.dist/main.css
View File

@ -587,6 +587,11 @@ html.cp,
.cp .page.first { .cp .page.first {
margin-top: calc(100vh - 50px); margin-top: calc(100vh - 50px);
} }
@media screen and (max-width: 800px) {
.cp .page.first {
margin-top: 0;
}
}
.cp .page.even { .cp .page.even {
background: #dcdcdc; background: #dcdcdc;
} }
@ -594,25 +599,39 @@ html.cp,
background: #c2c2c2; background: #c2c2c2;
} }
.cp .page .left { .cp .page .left {
left: 0;
}
.cp .page .right {
left: 10%;
}
@media screen and (max-width: 800px) {
.cp .page {
padding: 10px 5vh;
}
}
.cp .page > div {
padding: 10px; padding: 10px;
width: 45%; width: 45%;
position: relative; position: relative;
left: 0;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.cp .page .right { @media screen and (max-width: 800px) {
padding: 10px; .cp .page > div:not(.image) {
width: 45%; width: 100%;
position: relative; left: 0;
left: 10%; }
display: inline-block;
vertical-align: middle;
} }
.cp .page .image { .cp .page .image {
text-align: center; text-align: center;
} }
@media screen and (max-width: 800px) {
.cp .page .image {
display: none;
}
}
.cp .page p { .cp .page p {
font-size: 18px;
text-align: justify; text-align: justify;
} }
.cp .btn-default:hover { .cp .btn-default:hover {
@ -753,6 +772,45 @@ html.cp,
.cp #main_other #userForm button.half:not(.first) { .cp #main_other #userForm button.half:not(.first) {
float: right; float: right;
} }
@media screen and (max-width: 800px) {
.cp #main #main-container,
.cp #main_other #main-container {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
}
@media screen and (max-width: 800px) {
.cp #main #userForm,
.cp #main_other #userForm,
.cp #main #data,
.cp #main_other #data {
transform: initial;
position: relative;
display: block;
width: 100%;
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
}
}
@media screen and (max-width: 800px) {
.cp #main #userForm,
.cp #main_other #userForm {
border: 1px solid #888;
}
}
@media screen and (max-width: 800px) {
.cp #main,
.cp #main_other {
position: relative;
height: auto;
background: #aaa;
top: -10px;
}
}
.cp #main .buttons, .cp #main .buttons,
.cp #main_other .buttons { .cp #main_other .buttons {
margin-top: 15px; margin-top: 15px;

1
customize.dist/privacy.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" /> <link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

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

@ -128,48 +128,67 @@ p, pre, td, a, table, tr {
body.html { body.html {
} }
.page {
width: 100%;
margin-left: auto;
margin-right: auto;
background: @base;
padding: 10px @main-border-width;
position: relative;
&.first { // Main page
margin-top: ~"calc(100vh - 50px)"; .page {
} width: 100%;
&.even { margin-left: auto;
background: darken(@base, 10%); margin-right: auto;
} background: @base;
&.category { padding: 10px @main-border-width;
background: darken(@base, 20%); position: relative;
}
.left { &.first {
padding: 10px; margin-top: ~"calc(100vh - 50px)";
width: 45%; @media screen and (max-width: @media-not-big) {
position: relative; margin-top: 0;;
left: 0; //@main-border-width;
display: inline-block;
vertical-align: middle;
}
.right {
padding: 10px;
width: 45%;
position: relative;
left: 10%; //@main-border-width;
display: inline-block;
vertical-align: middle;
}
.image {
text-align: center;
}
p {
text-align: justify;
} }
} }
&.even {
background: darken(@base, 10%);
}
&.category {
background: darken(@base, 20%);
}
.left {
left: 0; //@main-border-width;
}
.right {
left: 10%; //@main-border-width;
}
@media screen and (max-width: @media-not-big) {
padding: 10px 5vh;
}
&>div{
padding: 10px;
width: 45%;
position: relative;
display: inline-block;
vertical-align: middle;
&:not(.image) {
@media screen and (max-width: @media-not-big) {
width: 100%;
left: 0;
}
}
}
.image {
text-align: center;
@media screen and (max-width: @media-not-big) {
display: none;
}
}
p {
font-size: 18px;
text-align: justify;
}
}
.btn-default { .btn-default {
&:hover { &:hover {
@ -243,8 +262,8 @@ body.html {
top: 50%; top: 50%;
left: 0; left: 0;
transform: translateY(-50%); transform: translateY(-50%);
// width: ~"calc(100% - 450px - 30vw)"; //width: ~"calc(100% - 450px - 30vw)";
// background-color: @main-block-bg; //background-color: @main-block-bg;
#tryit { #tryit {
margin-top: 20px; margin-top: 20px;
@ -261,7 +280,7 @@ body.html {
display: inline-block; display: inline-block;
width: 350px; width: 350px;
max-width: 35%; max-width: 35%;
// background-color: @main-block-bg; //background-color: @main-block-bg;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
font-family: lato, Helvetica, sans-serif; font-family: lato, Helvetica, sans-serif;
@ -310,6 +329,38 @@ body.html {
} }
} }
} }
#main-container {
@media screen and (max-width: @media-not-big) {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
}
#userForm, #data {
@media screen and (max-width: @media-not-big) {
transform: initial;
position: relative;
display: block;
width: 100%;
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
}
}
#userForm {
@media screen and (max-width: @media-not-big) {
border: 1px solid #888;
}
}
@media screen and (max-width: @media-not-big) {
position: relative;
height: auto;
background: #aaa;
top: -10px;
}
.buttons { .buttons {
margin-top: 15px; margin-top: 15px;
} }

1
customize.dist/src/template.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" /> <link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>

1
customize.dist/terms.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title> <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" /> <link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/> <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>