CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Homepage rebrand adding bootstrap into header/footer

Browse Source
pull/136/head
katibest 7 years ago
parent 1be70b3afe
commit c45cae2adc
4 changed files with 115 additions and 76 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      apps/explorer_web/assets/css/components/_footer.scss
  2. 88
      apps/explorer_web/assets/css/components/_header.scss
  3. 2
      apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
  4. 91
      apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex

10
apps/explorer_web/assets/css/components/_footer.scss
Unescape View File

@ -1,8 +1,10 @@
.footer {
@include explorer-typography("body1");
width: 100%;
display: block;
background: explorer-color("slate", "900");
color: explorer-color("white");
bottom: 0;
background: explorer-color("gray", "50");
color:explorer-color("gray", "700");
text-align: center;
padding: explorer-size(-1) 0;
padding: 10px;
height: 30px;
}

88
apps/explorer_web/assets/css/components/_header.scss
Unescape View File

@ -3,24 +3,34 @@
background: explorer-color("gray", "50");
box-shadow: 0 2px 2px 0 rgba(explorer-color("slate", "900"), 0.16),
0 0px 2px 0 rgba(explorer-color("slate", "900"), 0.12);
position: fixed;
display: flex;
width: 100%;
top: 0;
left: 0;
right: 0;
&__container { width: 100%; }
&__row { vertical-align: middle; }
&__container {
width: 100%;
margin-top: 7px;
}
&__row {
vertical-align: middle;
}
&__cell {
@extend %explorer-header-height;
&--logo { @extend %explorer-header-square-width; }
&--links {
display: flex;
flex-direction: row-reverse;
padding-right: explorer-size(0);
}
&--search {
@include explorer-typography("body1");
padding-left: explorer-size(0);
padding-left: 8px;
}
&--search-form {
@ -31,74 +41,26 @@
height: 16px;
width: 16px;
position: absolute;
top: 14px;
top: 18px;
left: 16px;
opacity: 0.5;
}
&--search-input {
width: 100%;
width: 50%;
border: none;
background-color: transparent;
height: explorer-size(1);
padding-left: explorer-size(1);
padding-right: explorer-size(-1);
height: 50px;
padding-left: 45px;
@media (max-width: 768px) {
width: 90%;
padding-top: 5px;
}
}
&--search-input[placeholder] {
text-overflow: ellipsis;
}
}
&__logo-link {
@extend %explorer-header-height;
@extend %explorer-header-square-width;
display: flex;
background: explorer-color("blue", "500");
align-items: center;
justify-content: center;
}
&__logo {
width: 32px;
height: 36px;
display: block;
}
&__link {
@extend %explorer-header-height;
display: block;
text-decoration: none;
border-top: explorer-size(-4) solid transparent;
border-left: explorer-size(-4) solid transparent;
border-right: explorer-size(-4) solid transparent;
padding: explorer-size(-3);
color: explorer-color("slate", "900");
&:hover {
border-top-color: explorer-color("blue", "500");
color: explorer-color("blue", "500");
}
& + & { margin-right: explorer-size(-2); }
&--optional { display: none; }
}
&__link-name {
@include explorer-typography("body1");
margin-left: explorer-size(-3);
}
&__link-image, &__link-name {
display: inline-block;
vertical-align: middle;
}
}
@media (min-width: $explorer-breakpoint-sm) {
.header {
&__link {
&--optional { display: block; }
}
}
}

2
apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
Unescape View File

@ -1,3 +1,3 @@
<footer class="footer">
<%= gettext "Copyright %{year} POA", year: 2018 %>
</footer>

91
apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
Unescape View File

@ -6,15 +6,90 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= gettext "POA Network Explorer" %></title>
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body>
<%= render ExplorerWeb.LayoutView, "_header.html", assigns %>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<main role="main" class="container">
<%= render @view_module, @view_template, assigns %>
</main>
<%= render ExplorerWeb.LayoutView, "_footer.html", assigns %>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
<div class="wrapper wrapper-overflow">
<!-- Sidebar Holder -->
<nav id="sidebar" class="sticky fixed-top">
<div class="sidebar-header">
<a href="<%= chain_path(@conn, :show) %>">
<img class="" src="<%= static_path(@conn, "/images/logo.svg") %>" />
</a>
</div>
<div class="menu-items">
<a href="<%= block_path(@conn, :index, Gettext.get_locale) %>" class="header__link">
<div tabindex="0" class="icon-locate">
<img class="" src="<%= static_path(@conn, "/images/block.svg") %>" />
<%= gettext("Blocks") %>
</div>
</a>
<div tabindex="0" class="icon-locate">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<img class="" src="<%= static_path(@conn, "/images/transaction.svg") %>" />
<%= gettext("Transactions") %>
<img class="caret-down" src="<%= static_path(@conn, "/images/caret-down.svg") %>" / >
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="<%= transaction_path(@conn, :index, Gettext.get_locale) %>">Validated</a></li>
<li><a href="<%= pending_transaction_path(@conn, :index, Gettext.get_locale) %>">Pending</a></li>
</ul>
</div>
</div>
<div class="sidebar-footer">
<%= gettext "Copyright %{year} POA", year: 2018 %>
</div>
</nav>
<!-- Page Content Holder -->
<div id="content" class="size-content">
<div class="content-header sticky fixed-top">
<nav>
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></span>
</button>
</nav>
<header class="header">
<table class="header__container" cellspacing="0" cellpadding="0" border="0">
<tr class="header__row">
<td class="header__cell header__cell--search">
<%= form_for @conn, chain_path(@conn, :search, Gettext.get_locale), [class: "header__cell--search-form", method: :get, enforce_utf8: false], fn f -> %>
<%= img_tag :svg, src: static_path(@conn, "/images/mgi.svg"), class: "header__cell--search-glass" %>
<%= search_input f, :q, class: 'header__cell--search-input', placeholder: gettext "Search by address, transaction hash, or block number" %>
<% end %>
</td>
</tr>
</table>
</header>
</div>
<div class="content-container">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= render @view_module, @view_template, assigns %>
</div>
<!-- <%= render ExplorerWeb.LayoutView, "_footer.html", assigns %> -->
</div>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$(this).toggleClass('active');
});
});
</script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js'></script>
<script type='text/javascript'>
$(function() {
FastClick.attach(document.body);
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save