Upgraded console homepage
This commit is contained in:
parent
1fe8a216b3
commit
64e290ce53
13 changed files with 142 additions and 47 deletions
|
@ -1,4 +1,9 @@
|
||||||
<header class="clear">
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div class="list pull-start project-only">
|
<div class="list pull-start project-only">
|
||||||
<label>
|
<label>
|
||||||
|
@ -47,7 +52,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav>
|
<nav class="project-only">
|
||||||
<a class="logo" href="/console"
|
<a class="logo" href="/console"
|
||||||
data-analytics-event="click"
|
data-analytics-event="click"
|
||||||
data-analytics-category="console/navigation"
|
data-analytics-category="console/navigation"
|
||||||
|
|
|
@ -3,27 +3,21 @@ $home = $this->getParam('home', '');
|
||||||
?>
|
?>
|
||||||
<div class="cover">
|
<div class="cover">
|
||||||
<div class="zone xl">
|
<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">
|
<ul class="margin-bottom-xl clear">
|
||||||
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/" target="_blank"><i class="icon-lamp"></i> 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> Learn More</a></li>
|
||||||
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/docs" target="_blank"><i class="icon-book-open"></i> Documentation</a></li>
|
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/docs" target="_blank"><i class="icon-book-open"></i> Documentation</a></li>
|
||||||
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/support" target="_blank"><i class="icon-lifebuoy"></i> Support</a></li>
|
<li class="pull-start margin-end"><a href="<?php echo $home; ?>/support" target="_blank"><i class="icon-lifebuoy"></i> Support</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="zone xl margin-bottom-large margin-top-negative-large">
|
<section class="zone xl margin-bottom margin-top-negative-xl">
|
||||||
<div
|
<div class="margin-bottom-xl"
|
||||||
data-service="projects.list"
|
data-service="projects.list"
|
||||||
data-scope="console"
|
data-scope="console"
|
||||||
data-event="load,projects.create"
|
data-event="load,projects.create"
|
||||||
|
@ -49,4 +43,44 @@ $home = $this->getParam('home', '');
|
||||||
|
|
||||||
<button data-ls-ui-trigger="create-project">Create Project</button>
|
<button data-ls-ui-trigger="create-project">Create Project</button>
|
||||||
</div>
|
</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>
|
</section>
|
|
@ -37,7 +37,7 @@ if(!empty($platforms)) {
|
||||||
<link rel="manifest" href="/manifest.json">
|
<link rel="manifest" href="/manifest.json">
|
||||||
<title><?php echo $this->getParam('title', ''); ?></title>
|
<title><?php echo $this->getParam('title', ''); ?></title>
|
||||||
<meta name="description" content="<?php echo $this->getParam('description', ''); ?>" />
|
<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 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 href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600" rel="stylesheet">
|
||||||
<link rel="apple-touch-icon" href="/images/apple.png">
|
<link rel="apple-touch-icon" href="/images/apple.png">
|
||||||
|
|
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
|
@ -37,6 +37,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.line {
|
||||||
|
background: transparent;
|
||||||
|
border: solid 1px var(--config-color-background-dark);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
&.warning {
|
&.warning {
|
||||||
background: var(--config-color-success);
|
background: var(--config-color-success);
|
||||||
color: #2d2d2d;
|
color: #2d2d2d;
|
||||||
|
|
|
@ -110,6 +110,20 @@
|
||||||
color: var(--config-modal-note-color);
|
color: var(--config-modal-note-color);
|
||||||
border-top: solid 1px var(--config-modal-note-border);
|
border-top: solid 1px var(--config-modal-note-border);
|
||||||
border-bottom: 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 {
|
button.close {
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
--config-width-small: 320px;
|
--config-width-small: 320px;
|
||||||
--config-color-link: #1e849e;
|
--config-color-link: #1e849e;
|
||||||
--config-color-background: #eceff1;
|
--config-color-background: #eceff1;
|
||||||
|
--config-color-background-dark: #dfe2e4;
|
||||||
--config-color-background-fade: #ffffff;
|
--config-color-background-fade: #ffffff;
|
||||||
--config-color-background-focus: #f5f5f5;
|
--config-color-background-focus: #f5f5f5;
|
||||||
--config-color-background-input: #ffffff;
|
--config-color-background-input: #ffffff;
|
||||||
|
@ -14,7 +15,7 @@
|
||||||
--config-color-tooltip-text: #dce8f5;
|
--config-color-tooltip-text: #dce8f5;
|
||||||
--config-color-tooltip-background: #333333;
|
--config-color-tooltip-background: #333333;
|
||||||
--config-color-focus: #f02e65;
|
--config-color-focus: #f02e65;
|
||||||
--config-color-focus-fade: #fef8fb;
|
--config-color-focus-fade: #fef8fa;
|
||||||
--config-color-focus-hover: #ff729b;
|
--config-color-focus-hover: #ff729b;
|
||||||
--config-color-focus-glow: #fce5ec;
|
--config-color-focus-glow: #fce5ec;
|
||||||
--config-color-focus-dark: #c52653;
|
--config-color-focus-dark: #c52653;
|
||||||
|
@ -72,21 +73,22 @@
|
||||||
|
|
||||||
.theme-dark {
|
.theme-dark {
|
||||||
--config-color-background: #061F2F;
|
--config-color-background: #061F2F;
|
||||||
|
--config-color-background-dark: #262d50;
|
||||||
--config-color-background-fade: #1c223a;
|
--config-color-background-fade: #1c223a;
|
||||||
--config-color-background-focus: #1a1f35;
|
--config-color-background-focus: #1a1f35;
|
||||||
--config-color-background-input: #dce8f5;
|
--config-color-background-input: #dce8f5;
|
||||||
--config-color-tooltip-text: #061F2F;
|
--config-color-tooltip-text: #061F2F;
|
||||||
--config-color-tooltip-background: #dce8f5;
|
--config-color-tooltip-background: #dce8f5;
|
||||||
--config-color-link: rgb(76, 174, 219);
|
--config-color-link: #4caedb;
|
||||||
--config-color-placeholder: #9ea1af;
|
--config-color-placeholder: #9ea1af;
|
||||||
--config-color-focus: rgb(199, 216, 235);
|
--config-color-focus: #c7d8eb;
|
||||||
--config-color-focus-fade: #1e233e;
|
--config-color-focus-fade: #1e233e;
|
||||||
--config-color-focus-hover: #d3deea;
|
--config-color-focus-hover: #d3deea;
|
||||||
--config-color-focus-glow: #d3deea;
|
--config-color-focus-glow: #d3deea;
|
||||||
--config-color-focus-dark: #657586;
|
--config-color-focus-dark: #657586;
|
||||||
--config-color-normal: rgb(199, 216, 235);
|
--config-color-normal: #c7d8eb;
|
||||||
--config-color-fade: #bec3e0;
|
--config-color-fade: #bec3e0;
|
||||||
--config-color-fade-light: rgb(24, 24, 24);
|
--config-color-fade-light: #181818;
|
||||||
--config-color-fade-super: #262D50;
|
--config-color-fade-super: #262D50;
|
||||||
--config-color-danger: #d84a4a;
|
--config-color-danger: #d84a4a;
|
||||||
--config-color-success: #34b86d;
|
--config-color-success: #34b86d;
|
||||||
|
@ -161,7 +163,6 @@
|
||||||
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1200px)";
|
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1200px)";
|
||||||
@desktops: ~"only screen and (min-width: 1201px) and (max-width: 1300px)";
|
@desktops: ~"only screen and (min-width: 1201px) and (max-width: 1300px)";
|
||||||
@big-screens: ~"only screen and (min-width: 1200px)";
|
@big-screens: ~"only screen and (min-width: 1200px)";
|
||||||
@dark: ~"(prefers-color-scheme: dark)";
|
|
||||||
|
|
||||||
img[src=""] {
|
img[src=""] {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
@ -202,7 +203,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
min-height: 100%;
|
//min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
|
@ -97,6 +97,7 @@ https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clik
|
||||||
.func-start(50%);
|
.func-start(50%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: bottom .3s, opacity .3s;
|
transition: bottom .3s, opacity .3s;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
.func-padding-end(5px);
|
.func-padding-end(5px);
|
||||||
|
|
|
@ -39,6 +39,12 @@ button,
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
&.fly {
|
&.fly {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
@ -242,6 +248,7 @@ select {
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: var(--config-color-normal);
|
color: var(--config-color-normal);
|
||||||
background: var(--config-color-fade-super);
|
background: var(--config-color-fade-super);
|
||||||
|
opacity: 1!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.strip {
|
&.strip {
|
||||||
|
@ -483,7 +490,7 @@ fieldset {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.blue {
|
&.blue {
|
||||||
background: #4abde8;
|
background: #386fd2;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -262,7 +262,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media @tablets {
|
@media @tablets {
|
||||||
|
li {
|
||||||
|
width: ~"calc(50% - 25px)";
|
||||||
|
|
||||||
|
&:nth-child(3n) {
|
||||||
|
.margin-end-large!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
.func-margin-end(0)!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media @phones {
|
@media @phones {
|
||||||
|
|
|
@ -28,6 +28,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hide-nav {
|
&.hide-nav {
|
||||||
|
.func-padding-start(50px);
|
||||||
|
width: ~"calc(100% - 100px)";
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: ~"calc(100% - 50px)";
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.console-back {
|
.console-back {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -50,20 +61,6 @@
|
||||||
.console-back {
|
.console-back {
|
||||||
display: none;
|
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 {
|
header {
|
||||||
|
@ -79,6 +76,21 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: none;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 26px;
|
||||||
|
margin: 7px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.setup-new {
|
.setup-new {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
@ -157,8 +169,8 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 9px;
|
margin-top: 7px;
|
||||||
width: 75%;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg g {
|
svg g {
|
||||||
|
@ -370,8 +382,7 @@
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
width: 270px;
|
width: 270px;
|
||||||
|
|
||||||
&:nth-child(3n),
|
&:nth-child(3n) {
|
||||||
&.new {
|
|
||||||
.func-margin-end(0);
|
.func-margin-end(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -106,6 +106,10 @@ table {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
|
|
||||||
|
.pull-end, .pull-start {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -145,11 +149,13 @@ table {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
td:before {
|
td:not([data-title=""]) {
|
||||||
|
&:before {
|
||||||
content: attr(data-title);
|
content: attr(data-title);
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
Loading…
Reference in a new issue