CodeMirror/appwrite
1
0
Fork 0
mirror of synced 2024-06-26 18:20:43 +12:00
Code Issues Projects Releases Wiki Activity

Upgraded console homepage

Browse source
This commit is contained in:
Eldad Fux 2020-02-20 22:44:35 +02:00
parent 1fe8a216b3
commit 64e290ce53
13 changed files with 142 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/views/console/comps/header.phtml
View file

@ -1,4 +1,9 @@
<header class="clear">
<a href="/console" class="logo">
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a>
&nbsp;&nbsp;&nbsp;
<div class="list pull-start project-only">
<label>
@ -47,7 +52,7 @@
</button>
</div>
<nav>
<nav class="project-only">
<a class="logo" href="/console"
data-analytics-event="click"
data-analytics-category="console/navigation"

56
app/views/console/index.phtml
View file

@ -3,27 +3,21 @@ $home = $this->getParam('home', '');
?>
<div class="cover">
<div class="zone xl">
<div class="margin-top margin-bottom">
<a href="/">
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" height="30" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" height="30" />
</a>
</div>
<h1 class="margin-bottom">Welcome to Appwrite Console</h1>
<h1 class="margin-bottom margin-top">Your Appwrite Projects</h1>
<p class="margin-bottom margin-top-negative-small">Start creating projects and take advantage of Appwrite development tools and APIs.</p>
<p class="margin-bottom margin-top-negative-small">Start creating projects and take advantage of Appwrite server.</p>
<ul class="margin-bottom-xl clear">
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/" target="_blank"><i class="icon-lamp"></i> &nbsp;Learn More</a></li>
<li class="pull-start margin-end margin-bottom-small"><a href="<?php echo $home; ?>/" target="_blank"><i class="icon-lamp"></i> &nbsp;Learn More</a></li>
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/docs" target="_blank"><i class="icon-book-open"></i> &nbsp;Documentation</a></li>
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/support" target="_blank"><i class="icon-lifebuoy"></i> &nbsp;Support</a></li>
</ul>
</div>
</div>
<section class="zone xl margin-bottom-large margin-top-negative-large">
<div
<section class="zone xl margin-bottom margin-top-negative-xl">
<div class="margin-bottom-xl"
data-service="projects.list"
data-scope="console"
data-event="load,projects.create"
@ -49,4 +43,44 @@ $home = $this->getParam('home', '');
<button data-ls-ui-trigger="create-project">Create Project</button>
</div>
<div class="row responsive">
<div class="col span-6 margin-bottom">
<div class="box line">
<h3 class="margin-bottom-small text-size-normal">Join The Community</h3>
<p class="text-fade">Join Appwrite growing developers community channels.</p>
<a href="<?php echo APP_SOCIAL_TWITTER; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Twitter"
data-analytics-event="click"
data-analytics-category="console/home"
data-analytics-label="Twitter Link"><i class="icon-twitter"></i></a>
<a href="<?php echo APP_SOCIAL_FACEBOOK; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Facebook"
data-analytics-event="click"
data-analytics-category="console/home"
data-analytics-label="Facebook Link"><i class="icon-facebook"></i></a>
<a href="<?php echo APP_SOCIAL_LINKEDIN; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Linkedin"
data-analytics-event="click"
data-analytics-category="console/home"
data-analytics-label="Linkedin Link"><i class="icon-linkedin"></i></a>
<a href="<?php echo APP_SOCIAL_DISCORD; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> Discord Server"
data-analytics-event="click"
data-analytics-category="console/home"
data-analytics-label="Discord Link"><i class="icon-discord"></i></a>
<a href="<?php echo APP_SOCIAL_GITHUB; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Github"
data-analytics-event="click"
data-analytics-category="console/home"
data-analytics-label="GitHub Link"><i class="icon-github-circled"></i></a>
</div>
</div>
<div class="col span-6 margin-bottom">
<div class="box line">
<h3 class="margin-bottom-small text-size-normal">Read The Docs</h3>
<p class="text-fade">Take full advantage of Appwrite APIs and tools for your new project.</p>
<a href="https://github.com/appwrite/appwrite/blob/master/docs/tutorials/environment-variables.md" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Full Documentation</a>
</div>
</div>
</div>
</section>

2
app/views/layouts/default.phtml
View file

@ -37,7 +37,7 @@ if(!empty($platforms)) {
<link rel="manifest" href="/manifest.json">
<title><?php echo $this->getParam('title', ''); ?></title>
<meta name="description" content="<?php echo $this->getParam('description', ''); ?>" />
<link rel="stylesheet" media="all" type="text/css" href="/dist/styles/default-<?php echo Locale::getText('settings.direction'); ?>.css?v=<?php echo $version; ?>" />
<link rel="stylesheet" media="all" type="text/css" href="/dist/styles/default-<?php echo Locale::getText('settings.direction'); ?>.css?v=2.<?php echo $version; ?>" />
<link rel="icon" type="image/png" href="<?php echo $this->escape($this->getParam('icon', '')); ?>?v=1" />
<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600" rel="stylesheet">
<link rel="apple-touch-icon" href="/images/apple.png">

2
public/dist/styles/default-ltr.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/dist/styles/default-rtl.css vendored
View file

File diff suppressed because one or more lines are too long

6
public/styles/comps/box.less
View file

@ -37,6 +37,12 @@
}
}
&.line {
background: transparent;
border: solid 1px var(--config-color-background-dark);
box-shadow: none;
}
&.warning {
background: var(--config-color-success);
color: #2d2d2d;

14
public/styles/comps/modal.less
View file

@ -110,6 +110,20 @@
color: var(--config-modal-note-color);
border-top: solid 1px var(--config-modal-note-border);
border-bottom: solid 1px var(--config-modal-note-border);
ol {
.func-padding-start(40px);
p {
display: inline-block;
}
li {
&:before {
position: absolute;
}
}
}
}
button.close {

15
public/styles/default.less
View file

@ -7,6 +7,7 @@
--config-width-small: 320px;
--config-color-link: #1e849e;
--config-color-background: #eceff1;
--config-color-background-dark: #dfe2e4;
--config-color-background-fade: #ffffff;
--config-color-background-focus: #f5f5f5;
--config-color-background-input: #ffffff;
@ -14,7 +15,7 @@
--config-color-tooltip-text: #dce8f5;
--config-color-tooltip-background: #333333;
--config-color-focus: #f02e65;
--config-color-focus-fade: #fef8fb;
--config-color-focus-fade: #fef8fa;
--config-color-focus-hover: #ff729b;
--config-color-focus-glow: #fce5ec;
--config-color-focus-dark: #c52653;
@ -72,21 +73,22 @@
.theme-dark {
--config-color-background: #061F2F;
--config-color-background-dark: #262d50;
--config-color-background-fade: #1c223a;
--config-color-background-focus: #1a1f35;
--config-color-background-input: #dce8f5;
--config-color-tooltip-text: #061F2F;
--config-color-tooltip-background: #dce8f5;
--config-color-link: rgb(76, 174, 219);
--config-color-link: #4caedb;
--config-color-placeholder: #9ea1af;
--config-color-focus: rgb(199, 216, 235);
--config-color-focus: #c7d8eb;
--config-color-focus-fade: #1e233e;
--config-color-focus-hover: #d3deea;
--config-color-focus-glow: #d3deea;
--config-color-focus-dark: #657586;
--config-color-normal: rgb(199, 216, 235);
--config-color-normal: #c7d8eb;
--config-color-fade: #bec3e0;
--config-color-fade-light: rgb(24, 24, 24);
--config-color-fade-light: #181818;
--config-color-fade-super: #262D50;
--config-color-danger: #d84a4a;
--config-color-success: #34b86d;
@ -161,7 +163,6 @@
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1200px)";
@desktops: ~"only screen and (min-width: 1201px) and (max-width: 1300px)";
@big-screens: ~"only screen and (min-width: 1200px)";
@dark: ~"(prefers-color-scheme: dark)";
img[src=""] {
visibility: hidden;
@ -202,7 +203,7 @@ body {
}
main {
min-height: 100%;
//min-height: 100%;
}
ul {

1
public/styles/dependencies/prism.less
View file

@ -97,6 +97,7 @@ https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clik
.func-start(50%);
opacity: 0;
transition: bottom .3s, opacity .3s;
line-height: normal;
&::before {
.func-padding-end(5px);

9
public/styles/forms.less
View file

@ -39,6 +39,12 @@ button,
border-bottom: none;
}
&.small {
height: 30px;
width: 30px;
line-height: 30px;
}
&.fly {
position: fixed;
z-index: 2;
@ -242,6 +248,7 @@ select {
&:disabled {
color: var(--config-color-normal);
background: var(--config-color-fade-super);
opacity: 1!important;
}
&.strip {
@ -483,7 +490,7 @@ fieldset {
}
&.blue {
background: #4abde8;
background: #386fd2;
color: #fff;
}

14
public/styles/grid.less
View file

@ -256,13 +256,23 @@
border-bottom: solid 1px var(--config-color-fade-super);
}
&:nth-child(3n) {
.func-margin-end(0)!important;
&:nth-child(3n) {
.func-margin-end(0)!important;
}
}
@media @tablets {
li {
width: ~"calc(50% - 25px)";
&:nth-child(3n) {
.margin-end-large!important;
}
&:nth-child(2n) {
.func-margin-end(0)!important;
}
}
}
@media @phones {

47
public/styles/scopes/console.less
View file

@ -28,6 +28,17 @@
}
&.hide-nav {
.func-padding-start(50px);
width: ~"calc(100% - 100px)";
header {
width: ~"calc(100% - 50px)";
.logo {
display: inline-block;
}
}
.console-back {
display: block;
}
@ -50,20 +61,6 @@
.console-back {
display: none;
}
&:before {
content: '';
display: block;
position: absolute;
width: ~"calc(100% - 220px)";
height: 100px;
top: -100px;
left: 0;
right: 0;
background: #ffffff;
z-index: 1000;
.func-border-start(220px, #132a3b);
}
}
header {
@ -79,6 +76,21 @@
z-index: 2;
font-size: 14px;
.logo {
display: none;
border: none;
&:hover {
border: none;
opacity: .8;
}
img {
height: 26px;
margin: 7px 0;
}
}
.setup-new {
width: 40px;
height: 40px;
@ -157,8 +169,8 @@
img {
display: inline-block;
margin-top: 9px;
width: 75%;
margin-top: 7px;
margin-bottom: 14px;
}
svg g {
@ -370,8 +382,7 @@
margin-bottom: 50px;
width: 270px;
&:nth-child(3n),
&.new {
&:nth-child(3n) {
.func-margin-end(0);
}
}

14
public/styles/tabels.less
View file

@ -106,6 +106,10 @@ table {
overflow: hidden;
padding-top: 12px;
.pull-end, .pull-start {
float: none;
}
.hide {
display: none;
}
@ -145,10 +149,12 @@ table {
}
}
td:before {
content: attr(data-title);
margin-right: 4px;
font-weight: 400;
td:not([data-title=""]) {
&:before {
content: attr(data-title);
margin-right: 4px;
font-weight: 400;
}
}
thead {