Merge pull request 'Design Updates' (#10) from design-updates into master
Reviewed-on: #10
This commit is contained in:
commit
2a860ca8d2
|
@ -0,0 +1,19 @@
|
||||||
|
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="HelpScreen" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="HelpScreen">How To Use This Site</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="desktop-img"></div>
|
||||||
|
<div class="mobile-img"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -7,8 +7,6 @@
|
||||||
|
|
||||||
@import "components/table";
|
@import "components/table";
|
||||||
|
|
||||||
#page_header {
|
@import "components/help";
|
||||||
margin-bottom: 0;
|
|
||||||
/* background-image: url("/assets/images/banner_bkg.png"); */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@import "components/footer";
|
|
@ -0,0 +1,3 @@
|
||||||
|
footer .col-sm-4 a {
|
||||||
|
color:#f8f9fa;
|
||||||
|
}
|
|
@ -0,0 +1,67 @@
|
||||||
|
#help-button-desktop {
|
||||||
|
background-color: lightgray;
|
||||||
|
margin: 10px;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
border-radius: 100%;
|
||||||
|
text-align: center;
|
||||||
|
float: right;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size:1.5em;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#help-button-desktop:hover {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#help-button-mobile:hover {
|
||||||
|
background-color:darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 991.97px) {
|
||||||
|
|
||||||
|
a #help-button-mobile {
|
||||||
|
display:none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-img {
|
||||||
|
background-image: url(/public/assets/images/desk.jpg);
|
||||||
|
width:100%;
|
||||||
|
height:851px;
|
||||||
|
max-height:100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 991.98px) {
|
||||||
|
|
||||||
|
a #help-button-mobile {
|
||||||
|
background-color: lightgray;
|
||||||
|
margin: 10px;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
border-radius: 100%;
|
||||||
|
text-align: center;
|
||||||
|
float: right;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size:1.5em;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a #help-button-desktop {
|
||||||
|
display:none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-img {
|
||||||
|
background-image: url(/public/assets/images/mobile.jpg);
|
||||||
|
width:100%;
|
||||||
|
height:1348px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
}
|
|
@ -19,5 +19,5 @@ table.word-details td.selected {
|
||||||
}
|
}
|
||||||
|
|
||||||
.verse-greek-text span.selected {
|
.verse-greek-text span.selected {
|
||||||
color: lightblue;
|
background-color: lightblue;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="/">
|
<a class="navbar-brand" href="/">
|
||||||
<img src="/assets/images/logo-head.svg" width="166" height="50" class="d-inline-block align-top" alt="Wycliffe Associates">
|
<img src="/assets/images/btr-logo-white.svg" width="auto" height="40em" class="d-inline-block align-top" alt="Wycliffe Associates">
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
@ -20,16 +20,20 @@
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<LinkTo @route="user-guide" class="nav-link">How to Use the Site</LinkTo>
|
<LinkTo @route="user-guide" class="nav-link">How to Use the Site</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/contact-us">Contact Us</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-desktop" title="Get Help">?</div></a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="jumbotron jumbotron-fluid p-2 m-0" id="page_header">
|
|
||||||
<img src="/assets/images/sample-logo-r.svg" class="mx-auto d-block" alt="" height="145">
|
|
||||||
<!--<h1 class="text-light">Biblical Resources for Translators</h1>-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ScriptureNavBar/>
|
<ScriptureNavBar/>
|
||||||
|
|
||||||
|
<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-mobile" title="Get Help">?</div></a>
|
||||||
|
|
||||||
|
<HelpModal/>
|
||||||
|
|
||||||
{{outlet}}
|
{{outlet}}
|
||||||
|
|
||||||
<footer class="card-fluid bg-dark mt-5">
|
<footer class="card-fluid bg-dark mt-5">
|
||||||
|
@ -38,8 +42,8 @@
|
||||||
<div class="row mt-4">
|
<div class="row mt-4">
|
||||||
<div class="col-sm-4 mb-4">
|
<div class="col-sm-4 mb-4">
|
||||||
<h4 class="text-light text-center mb-3">About This Site</h4>
|
<h4 class="text-light text-center mb-3">About This Site</h4>
|
||||||
<p class="text-light">Developed by Wycliffe Associates and our partners to provide access to tools and resources needed to complete the work of Bible translation.
|
<p class="text-light">Developed by Wycliffe Associates and our partners to provide access to tools and resources needed to complete the work of Bible translation.</p>
|
||||||
</p>
|
<p class="text-light"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4 mb-3 text-center">
|
<div class="col-sm-4 mb-3 text-center">
|
||||||
<h4 class="text-light mb-3">Find Us</h4>
|
<h4 class="text-light mb-3">Find Us</h4>
|
||||||
|
@ -63,7 +67,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer text-muted text-center">
|
<div class="card-footer text-muted text-center">
|
||||||
© 2021 Bible Translation Resources. All Rights Reserved
|
|
||||||
<div class="mt-3 mb-2"><a href="http://www.wycliffeassociates.org"><img width="266" height="50" src="/assets/images/wycliffe-associates-logo-l.svg"></a></div>
|
<div class="mt-3 mb-2"><a href="http://www.wycliffeassociates.org"><img width="266" height="50" src="/assets/images/wycliffe-associates-logo-l.svg"></a></div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
After Width: | Height: | Size: 180 KiB |
Loading…
Reference in New Issue