Merge pull request #136 from brockwhittaker/master

about: Restyle Electron => Zulip desktop page.
This commit is contained in:
Akash Nimare
2017-04-13 01:06:05 +05:30
committed by GitHub
2 changed files with 65 additions and 17 deletions

View File

@@ -6,17 +6,19 @@
</head> </head>
<body> <body>
<div class="about"> <div class="about">
<center><img src="../resources/zulip.png"></center> <img class="logo" src="../resources/zulip.png" />
<center><p class="detail" id="version"> Version : ?.?.? </p> <p class="detail" id="version">version ?.?.?</p>
<center><p class="detail"> License : Apache </p> <div class="maintenance-info">
<center><p class="detail"> Maintainer : Zulip </p> <p class="detail maintainer">Maintained by Zulip</p>
<p class="left"><a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a></p> <p class="detail license">Available under the Apache License</p>
<a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a>
</div>
</div> </div>
<script> <script>
const app = require('electron').remote.app; const app = require('electron').remote.app;
const version_tag = document.getElementById('version'); const version_tag = document.getElementById('version');
version_tag.innerHTML = ' Version : ' + app.getVersion() + ' '; version_tag.innerHTML = 'version ' + app.getVersion();
function linkInBrowser(event) { function linkInBrowser(event) {

View File

@@ -1,15 +1,22 @@
body { body {
background: #6BB6C7; background: #fafafa;
font-family: menu, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
}
.logo {
display: block;
margin: 0 auto;
}
#version {
color: #aaa;
font-size: 0.9em;
} }
.about { .about {
margin-top: 50px; margin-top: 50px;
} text-align: center;
.left {
position: absolute;
top:89%;
left:76%;
} }
.about p { .about p {
@@ -18,10 +25,49 @@ body {
} }
.about img { .about img {
width:160px; width: 150px;
} }
.detail { .detail {
text-align: left; text-align: center;
margin-left: 35%; }
}
.detail.maintainer {
font-size: 1.2em;
font-weight: 500;
}
.detail.license {
font-size: 0.8em;
}
.maintenance-info {
position: absolute;
width: 100%;
bottom: 20px;
left: 0px;
color: #444;
}
.maintenance-info p {
margin: 0;
font-size: 1em;
width: 100%;
}
.maintenance-info .bug {
display: inline-block;
padding: 8px 15px;
margin-top: 30px;
text-decoration: none;
background-color: #52c2af;
color: #fff;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.maintenance-info .bug:hover {
background-color: #32a692;
}