You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kibble.apache.org by hu...@apache.org on 2018/02/18 11:03:20 UTC
[kibble] 04/05: Redesign the menu layout a tad
This is an automated email from the ASF dual-hosted git repository.
humbedooh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/kibble.git
commit 457f60f5bdc76eeca5fb728e3addfa6d7c0aa41f
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Sun Feb 18 12:03:01 2018 +0100
Redesign the menu layout a tad
---
ui/contributors.html | 17 +++--------
ui/css/kibble.min.css | 85 +++++++++++++++++++++++++++++----------------------
ui/dashboard.html | 17 +++--------
ui/engagement.html | 17 +++--------
ui/organisations.html | 17 +++--------
ui/relationships.html | 17 +++--------
6 files changed, 73 insertions(+), 97 deletions(-)
diff --git a/ui/contributors.html b/ui/contributors.html
index 1f207dc..4b9248b 100644
--- a/ui/contributors.html
+++ b/ui/contributors.html
@@ -40,28 +40,21 @@
<div>
<nav class="menu">
<div class="profile">
- <!-- snoot specific, rm it later -->
- <div style="float: left; height: 100%; width: 45px;">
- <img id="user_image" style="width: 40px; margin-top: 10px;"/>
- <img id="user_image2" style="display: none;"/>
+ <div style="float: left; height: 100%; width: 40px;">
+ <img id="user_image"/>
</div>
- <div style="float: left; height: 100%; width: 100px;">
+ <div style="float: left; height: 100%; ">
<p style="margin-top: 8px;">
<span id="user_name"></span>
- <span id="user_name2" style="display: none;"></span>
<span id="messages_number" style="display: none;"></span>
</p>
- <p style="font-weight: bold; color: #223;">
+ <p style="font-weight: bold; color: #eacf7c;">
<span id="user_level"></span>
</p>
- <p>
- Last Visit:<br/>
- <i class="fa fa-calendar"></i> 16 Mar 16:32
- </p>
</div>
-
</div>
<div class="sidemenu">
+ <p class="sidetitle">Contributors:</p>
<ul>
<a href="contributors.html?page=growth"><li>Community Growh</li></a>
<a href="contributors.html?page=mvp"><li>Most Valuable People</li></a>
diff --git a/ui/css/kibble.min.css b/ui/css/kibble.min.css
index 6f2fe5e..557e016 100644
--- a/ui/css/kibble.min.css
+++ b/ui/css/kibble.min.css
@@ -269,24 +269,26 @@ select {
nav.menu {
position: absolute;
- background: #FFF;
+
+ background: #008FD5;
float: left;
- flex-direction: column;
- flex: flex-grow;
- box-sizing: border-box;
- width: 175px;
+ width: 160px;
color: #445;
font-size: 1.1em;
border-right: 1px solid #999;
overflow-y: auto;
- height: 100%;
+ overflow-x: hidden;
+}
+
+#user_image {
+ width: 32px; border: 1.5px solid #FFF; border-radius: 25%; margin-top: 10px;
}
nav.menu > div.sidemenu > ul {
margin: 0;
padding: 0;
list-style: none;
- width: 175px;
+ width: 160px;
float: left;
}
nav.menu > div.sidemenu > ul > a:last-child > li{
@@ -302,19 +304,23 @@ nav.menu > div.sidemenu > ul > a > li {
padding-top:10px;
margin-left: -4px;
min-width: 48px;
- font-size: 0.8rem;
+ font-size: 0.75rem;
font-family: montserrat light, sans-serif;
- background: #DDD;
+ background: rgba(0,0,0,0.15);
}
nav.menu > div.sidemenu > ul > a > li {
text-decoration: none;
- color: #445;
- font-size: 1.2rem;
+ color: #FFF;
+ font-size: 1.1rem;
}
nav.menu > div.sidemenu > ul > a > li:hover {
- background: #EEE;
+ background: #008FD5;
+}
+
+nav.menu > div.sidemenu > ul > a {
+ text-decoration: none;
}
nav.menu > div.sidemenu> ul > a > li > img {
@@ -323,18 +329,27 @@ nav.menu > div.sidemenu> ul > a > li > img {
}
nav.menu > div.sidemenu {
- width: 175px;
+ width: 160px;
float: left;
}
+.sidetitle {
+ color: #FFD;
+ font-weight: bold;
+ font-size: 1.15rem;
+ text-align: center;
+}
+
nav.menu > div.profile {
- width: 154px;
+ width: 145px;
margin: 10px;
- background: #CCC;
- border: 2px inset rgba(100,120,140,0.75);
+ background: rgba(0,0,0,0.2);
+ color: #FFF;
+ border: 1px inset rgba(100,120,140,0.75);
border-radius: 5px;
- height: 128px;
+ padding: 3px;
+ height: 80px;
font-size: 11px;
}
@@ -349,7 +364,6 @@ div.wrapper {
nav.titlebar {
margin: 0px;
padding: 0px;
- background: url(../images/background-bright.png), #EBEFF2;
height: 46px;
font-family: Montserrat, sanf-serif;
font-size: 32px;
@@ -357,18 +371,19 @@ nav.titlebar {
}
nav.topbar {
- margin: 0px;
+ margin: 4px auto;
padding: 0px;
- background: #323234;
+ background: #F54828;
height: 40px;
+ border-radius: 4px;
+ width: 1000px;
}
nav.titlebar > div.searchbar {
- width: 175px;
+ width: 160px;
float: left;
- border-right: 1px groove rgba(0,0,0,0.3);
+
margin-right: 49px;
- background: #FFF;
}
nav.topbar > img.logo {
@@ -376,8 +391,8 @@ nav.topbar > img.logo {
vertical-align: middle;
padding: 6px;
float: left;
- margin-right: 75px;
- margin-left: 50px;
+ margin-right: 20px;
+ margin-left: 20px;
}
nav.topbar > ul {
@@ -385,17 +400,14 @@ nav.topbar > ul {
padding: 0;
list-style: none;
}
-nav.topbar > ul > a:last-child > li{
- border-right: 1px solid #456;
-}
nav.topbar > ul > a.selected > li {
- background: linear-gradient(to bottom, #14181B 0, #121317 100%) !important;
+ background: #ED8828;
+ color: #FFF;
}
nav.topbar > ul > a > li {
display: inline-block;
- border-left: 1px solid #456;
height: 40px;
padding-left: 10px;
padding-right: 10px;
@@ -408,11 +420,11 @@ nav.topbar > ul > a > li {
nav.topbar > ul > a > li {
text-decoration: none;
- color: #bebebe;
+ color: #EEE;
}
nav.topbar > ul > a > li:hover {
- color: #EEE;
+ color: #FFC;
}
nav.topbar > ul > a > li > img {
@@ -433,14 +445,12 @@ div.wrap2 {
}
div.wrap3 {
- background: url(../images/background-bright.png), #EBEFF2;
padding: 0px;
}
.x_title {
- background: linear-gradient(to bottom, #3095D9 0, #258CD1 100%);
- box-shadow: 0 1px 4px rgba(0,0,0,0.065);
+ background: #008FD5;
box-sizing: border-box;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
border-bottom: 1px solid #d4d4d4;
@@ -465,7 +475,7 @@ h2 {
.x_title h2 {
display: block;
float: left;
- margin-top: 0px;
+ margin-top: 2px;
font-size: 1.3em !important;
font-weight: bold;
text-overflow: ellipsis;
@@ -486,10 +496,11 @@ h2 {
float: left;
clear: both;
background: #FFF;
- border: 4px solid #CCC;
+ border: 2px solid #AAA;
border-radius: 3px;
height: calc(100% - 42px);
overflow: visible;
+
}
.chartChart {
diff --git a/ui/dashboard.html b/ui/dashboard.html
index 90ce835..74bb880 100644
--- a/ui/dashboard.html
+++ b/ui/dashboard.html
@@ -41,28 +41,21 @@
<div>
<nav class="menu">
<div class="profile">
- <!-- snoot specific, rm it later -->
- <div style="float: left; height: 100%; width: 45px;">
- <img id="user_image" style="width: 40px; margin-top: 10px;"/>
- <img id="user_image2" style="display: none;"/>
+ <div style="float: left; height: 100%; width: 40px;">
+ <img id="user_image"/>
</div>
- <div style="float: left; height: 100%; width: 100px;">
+ <div style="float: left; height: 100%; ">
<p style="margin-top: 8px;">
<span id="user_name"></span>
- <span id="user_name2" style="display: none;"></span>
<span id="messages_number" style="display: none;"></span>
</p>
- <p style="font-weight: bold; color: #223;">
+ <p style="font-weight: bold; color: #eacf7c;">
<span id="user_level"></span>
</p>
- <p>
- Last Visit:<br/>
- <i class="fa fa-calendar"></i> 16 Mar 16:32
- </p>
</div>
-
</div>
<div class="sidemenu">
+ <p class="sidetitle">Data Points:</p>
<ul>
<a href="dashboard.html?page=repos"><li>Code Repositories</li></a>
<a href="dashboard.html?page=issues"><li>Issue Trackers</li></a>
diff --git a/ui/engagement.html b/ui/engagement.html
index b3a1a6f..2fec1b8 100644
--- a/ui/engagement.html
+++ b/ui/engagement.html
@@ -40,28 +40,21 @@
<div>
<nav class="menu">
<div class="profile">
- <!-- snoot specific, rm it later -->
- <div style="float: left; height: 100%; width: 45px;">
- <img id="user_image" style="width: 40px; margin-top: 10px;"/>
- <img id="user_image2" style="display: none;"/>
+ <div style="float: left; height: 100%; width: 40px;">
+ <img id="user_image"/>
</div>
- <div style="float: left; height: 100%; width: 100px;">
+ <div style="float: left; height: 100%; ">
<p style="margin-top: 8px;">
<span id="user_name"></span>
- <span id="user_name2" style="display: none;"></span>
<span id="messages_number" style="display: none;"></span>
</p>
- <p style="font-weight: bold; color: #223;">
+ <p style="font-weight: bold; color: #eacf7c;">
<span id="user_level"></span>
</p>
- <p>
- Last Visit:<br/>
- <i class="fa fa-calendar"></i> 16 Mar 16:32
- </p>
</div>
-
</div>
<div class="sidemenu">
+ <p class="sidetitle">Community Engagement:</p>
<ul>
<a href="engagement.html?page=factors"><li>Pony factors</li></a>
<a href="engagement.html?page=retention"><li>Contributor retention</li></a>
diff --git a/ui/organisations.html b/ui/organisations.html
index a689c3d..22813ee 100644
--- a/ui/organisations.html
+++ b/ui/organisations.html
@@ -42,28 +42,21 @@
<div>
<nav class="menu">
<div class="profile">
- <!-- snoot specific, rm it later -->
- <div style="float: left; height: 100%; width: 45px;">
- <img id="user_image" style="width: 40px; margin-top: 10px;"/>
- <img id="user_image2" style="display: none;"/>
+ <div style="float: left; height: 100%; width: 40px;">
+ <img id="user_image"/>
</div>
- <div style="float: left; height: 100%; width: 100px;">
+ <div style="float: left; height: 100%; ">
<p style="margin-top: 8px;">
<span id="user_name"></span>
- <span id="user_name2" style="display: none;"></span>
<span id="messages_number" style="display: none;"></span>
</p>
- <p style="font-weight: bold; color: #223;">
+ <p style="font-weight: bold; color: #eacf7c;">
<span id="user_level"></span>
</p>
- <p>
- Last Visit:<br/>
- <i class="fa fa-calendar"></i> 16 Mar 16:32
- </p>
</div>
-
</div>
<div class="sidemenu">
+ <p class="sidetitle">Organisations and Users:</p>
<ul>
<a href="organisations.html?page=org"><li>Organisations</li></a>
<a href="organisations.html?page=views"><li>Views</li></a>
diff --git a/ui/relationships.html b/ui/relationships.html
index b336b64..cd81b1a 100644
--- a/ui/relationships.html
+++ b/ui/relationships.html
@@ -40,28 +40,21 @@
<div>
<nav class="menu">
<div class="profile">
- <!-- snoot specific, rm it later -->
- <div style="float: left; height: 100%; width: 45px;">
- <img id="user_image" style="width: 40px; margin-top: 10px;"/>
- <img id="user_image2" style="display: none;"/>
+ <div style="float: left; height: 100%; width: 40px;">
+ <img id="user_image"/>
</div>
- <div style="float: left; height: 100%; width: 100px;">
+ <div style="float: left; height: 100%; ">
<p style="margin-top: 8px;">
<span id="user_name"></span>
- <span id="user_name2" style="display: none;"></span>
<span id="messages_number" style="display: none;"></span>
</p>
- <p style="font-weight: bold; color: #223;">
+ <p style="font-weight: bold; color: #eacf7c;">
<span id="user_level"></span>
</p>
- <p>
- Last Visit:<br/>
- <i class="fa fa-calendar"></i> 16 Mar 16:32
- </p>
</div>
-
</div>
<div class="sidemenu">
+ <p class="sidetitle">Contributor relationships:</p>
<ul>
<a href="relationships.html?page=code-rel"><li>Code relationships</li></a>
<a href="relationships.html?page=mail-rel"><li>Mailing list relationships</li></a>
--
To stop receiving notification emails like this one, please contact
humbedooh@apache.org.