relita

an encrypted, decentralized, peer-to-peer social network
Log | Files | Refs | README | LICENSE | git clone https://git.ne02ptzero.me/git/relita

commit e9cc1743176c94685cc381a70d754895cd31ec51
parent 54886232f149bda6e734c00ca516796adf473300
Author: Ne02ptzero <louis@ne02ptzero.me>
Date:   Wed, 12 Apr 2017 23:53:16 +0200

Work(UI): WIP on top menu

Diffstat:
Mcss/add_post.css | 3++-
Mcss/main.css | 5+++--
Mcss/menu.css | 115+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
Mcss/posts_list.css | 16+++++++++++-----
Mindex.html | 30++++++++++++++++++++++--------
Mjs/renderer.js | 4+++-
6 files changed, 145 insertions(+), 28 deletions(-)

diff --git a/css/add_post.css b/css/add_post.css @@ -1,8 +1,9 @@ .add_post { width: 100%; border: 0; - height: 6.2%; + height: 10%; background: rgba(126, 130, 122, 0.21); + display: none; } .add_post .placeholder { diff --git a/css/main.css b/css/main.css @@ -20,12 +20,13 @@ html, body { width: 100%; height: 100%; font-family: "Inconsolata"; - background-color: #262526; + background-color: #e3e3e3; color: #F2F2F2; } body { - margin-left: 102px; + margin-top: 83px; + margin-left: 60px; width: -webkit-calc(100% - 102px); } diff --git a/css/menu.css b/css/menu.css @@ -1,12 +1,11 @@ .menu { position: fixed; - width: 100px; + width: 60px; height: 100%; left: 0; top: 0; text-align: center; - background: #2F343B; - border-right: 3px solid rgba(0, 0, 0, 0.19); + background-color: #262526; z-index: 1; } @@ -34,11 +33,14 @@ } .menu ul .main { - height: 10%; + height: 60px; background: #703030; font-size: 3em; font-weight: bold; - border-bottom: 3px solid rgb(80, 56, 56); + padding: 0; + border: 0; + padding-top: 10px; + border-bottom: 3px solid rgba(255, 255, 255, 0.28); } .menu ul .last { @@ -61,7 +63,7 @@ } .menu ul li i { - font-size: 2em; + font-size: 1.5em; color: #e8dfce; margin-top: 15px; margin-bottom: 15px; @@ -75,26 +77,117 @@ width: 100px; } -.menu .status:hover { + +.g_header { + position: fixed; + top: 0; + left: 60px; + background: rgb(23, 22, 23); + height: 70px; + width: -webkit-calc(100% - 60px); + border-bottom: 3px solid rgba(255, 255, 255, 0.28); + z-index: 997; +} + +.g_header ul { + list-style: none; + display: inline; +} + +.g_header ul li { + display: block; + float: left; + height: 100%; +} + +.g_header ul .h_title { + width: 20%; + font-size: 1.5em; + text-align: center; + font-weight: bold; + padding-top: 20px; +} + +.g_header ul .h_search { + width: 40%; + position: relative; +} + +.g_header ul .h_search input { + height: 100%; + width: -webkit-calc(100% - 20px); + padding-left: 20px; + font-weight: 200; + font-family: "Inconsolata"; + border: 0; + background: #1f1e1f; +} + +.g_header ul .h_search i { + float: right; + color: white; + font-weight: 400; + position: absolute; + right: 5%; + top: 25px; +} + +.g_header ul .h_buttons { + width: 15%; + padding-left: 5%; +} + +.g_header ul .h_buttons ul li { + text-align: center; + width: 33.33%; + padding-top: 25px; + color: rgba(255, 255, 255, 0.82) +} + +.g_header ul .h_buttons ul li i:hover { + cursor: pointer; +} + +.g_header ul .h_profile { + width: 20%; + position: relative; +} + +.g_header ul .h_profile img { + height: 50px; + width: auto; + padding-top: 10px; + position: absolute; + right: 35%; +} + +.g_header ul .h_profile span { + position: absolute; + right: 15%; + padding-top: 25px; +} + +.status:hover { background: transparent; cursor: pointer; } -.menu .status i { +.status i { font-size: 0.5em; } -.menu .status .pending { +.status .pending { color: yellow; text-shadow: 0px 0px 5px #FFFFFF; } -.menu .status .failed { +.status .failed { color: red; text-shadow: 0px 0px 5px #FFFFFF; } -.menu .status .success { +.status .success { color: lime; text-shadow: 0px 0px 5px #FFFFFF; } + diff --git a/css/posts_list.css b/css/posts_list.css @@ -1,26 +1,32 @@ .posts_list { - margin-left: 5px; padding: 0; + margin-top: -10px; + width: -webkit-calc(105% - 10px); } .grid-item { - width: -webkit-calc(33% - 20px); + width: -webkit-calc(33.3333% - 10px); + box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.38); + background: white; + border-radius: 3px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .grid-item-w2 { - width: -webkit-calc(66% - 20px); + width: -webkit-calc(66.66% - 10px); } .grid-item-w3 { - width: -webkit-calc(100% - 30px); + width: -webkit-calc(100% - 10px); } .posts_list .single_post { background: rgba(255, 255, 255, 0.83); color: black; padding: 10px 5px 10px 5px; - margin-left: 10px; margin-top: 10px; + margin-left: 10px; } .posts_list .single_post .header { diff --git a/index.html b/index.html @@ -13,18 +13,32 @@ <div class='menu'> <ul> <li class='main'>R</li> - <li class='search'><i class="fa fa-search"></i></li> <li class='feed active'><i class="fa fa-feed"></i></li> <li class='chat'><i class="fa fa-comment"></i></li> + <li class="blog"><i class="fa fa-file-text-o"></i></li> <li class='music'><i class="fa fa-music"></i></li> - <li class='files'><i class="fa fa-file"></i></li> - <li class='settings last'><i class="fa fa-cog"></i></li> - <li class="my_profile"> - <img src="https://avatars1.githubusercontent.com/u/6032832?v=3&s=460" class="round_image"/> - </li> - <li class='status'> - <i class="fa fa-circle pending"></i> + <li class='photo'><i class="fa fa-camera"></i></li> + <li class='files last'><i class="fa fa-file"></i></li> + </ul> + </div> + <div class='g_header'> + <ul> + <li class='h_title'>/Feed</li> + <li class='h_search'> + <input type="text" placeholder="Search here for people or content ..." id="g_search_input" /> + <i class="fa fa-search"></i> </li> + <li class='h_buttons'> + <ul> + <li class='new_post'><i data-toggle="tooltip" data-placement="bottom" title="Add new content"class="fa fa-plus-circle"></i></li> + <li class='notifications'><i data-toggle="tooltip" data-placement="bottom" title="Notifications"class="fa fa-circle"></i></li> + <li class='settings'><i data-toggle="tooltip" data-placement="bottom" title="Settings"class="fa fa-cog"></i></li> + </ul> + </li> + <li class='h_profile'> + <img src="https://avatars1.githubusercontent.com/u/6032832?v=3&s=460" class="round_image"/> + <span class='status'><i class="fa fa-circle pending"></i></span> + </li> </ul> </div> <div class='title'> diff --git a/js/renderer.js b/js/renderer.js @@ -24,7 +24,7 @@ $(function() { }) ipcRenderer.on('new_entry', (event, arg) => { - if ($grid === null) + if ($grid === null) { $grid = $('.grid').masonry({ itemSelector: '.grid-item', @@ -32,7 +32,9 @@ $(function() { }); } if (arg.value.content.sub_type === "post") + { add_post_to_page(arg) + } }) ipcRenderer.on('connection_event', (event, arg) => {