Switched to Bootstrap 4 Alpha 6 and converted Navbar
This commit is contained in:
Sam Collins
parent
59024b892e
commit
25dd644c16
|
|
@ -1,3 +1,4 @@
|
|||
media/*
|
||||
.idea/
|
||||
__pycache__/
|
||||
__pycache__/
|
||||
node_modules
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 938 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="114" height="114" viewBox="0 0 114 114"><circle fill="teal" cx="57" cy="57" r="57"/><path fill="#FFF" d="M57 98.5l-13-13 2.2-2.2-15.5-15.5-2.2 2.2-13-13L35 37.5l13 13-4.2 4.2 2.7 2.7 11-11-2.7-2.7-4.1 4.1-13-13L57 15.5l13 13-2.2 2.2 15.5 15.5 2.2-2.2 13 13-19.3 19.3-13-13 4.1-4.1-2.2-2.2-11 11.1 2.2 2.2 4.2-4.2 13 13L57 98.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1 @@
|
|||
$(".form-group").removeClass("row");
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
$white: #fff;
|
||||
$mint-green: #d6e9c6;
|
||||
$black: #000;
|
||||
$pink: #f2dede;
|
||||
$dark-pink: #eed3d7;
|
||||
$red: #b94a48;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// bootstrap alert CSS, translated to the django-standard levels of
|
||||
// debug, info, success, warning, error
|
||||
.alert-debug {
|
||||
background-color: $white;
|
||||
border-color: $mint-green;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: $pink;
|
||||
border-color: $dark-pink;
|
||||
color: $red;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
#navbar-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
transition: transform .8s ease-in-out;
|
||||
&:hover{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +1,10 @@
|
|||
@import "node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
// project specific CSS goes here
|
||||
@import "variables";
|
||||
|
||||
////////////////////////////////
|
||||
//Variables//
|
||||
////////////////////////////////
|
||||
|
||||
// Alert colors
|
||||
|
||||
$white: #fff;
|
||||
$mint-green: #d6e9c6;
|
||||
$black: #000;
|
||||
$pink: #f2dede;
|
||||
$dark-pink: #eed3d7;
|
||||
$red: #b94a48;
|
||||
|
||||
////////////////////////////////
|
||||
//Alerts//
|
||||
////////////////////////////////
|
||||
|
||||
// bootstrap alert CSS, translated to the django-standard levels of
|
||||
// debug, info, success, warning, error
|
||||
|
||||
.alert-debug {
|
||||
background-color: $white;
|
||||
border-color: $mint-green;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: $pink;
|
||||
border-color: $dark-pink;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
////////////////////////////////
|
||||
//Navbar//
|
||||
////////////////////////////////
|
||||
|
||||
// This is a fix for the bootstrap4 alpha release
|
||||
|
||||
.navbar {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 47.9em) {
|
||||
.navbar-nav .nav-item {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav.navbar-nav.pull-xs-right {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
@import "components/alert";
|
||||
@import "components/header";
|
||||
@import "components/footer";
|
||||
|
||||
////////////////////////////////
|
||||
//Django Toolbar//
|
||||
|
|
|
|||
|
|
@ -1,142 +1,130 @@
|
|||
{% load staticfiles i18n compress%}<!DOCTYPE html>
|
||||
{% load staticfiles i18n compress %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{% block title %}Maidstone Hackspace{% endblock title %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{% block title %}Maidstone Hackspace{% endblock title %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="icon" type="image/png" href="/static/images/favicon.png">
|
||||
{% block css %}
|
||||
<!-- Latest compiled and minified Bootstrap 4 Alpha 4 CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
|
||||
<link rel="icon" type="image/png" href="/static/images/favicon.png">
|
||||
{% block css %}
|
||||
|
||||
<!-- Your stuff: Third-party CSS libraries go here -->
|
||||
{% compress css %}
|
||||
{# { compress css }#}
|
||||
<!-- This file stores project-specific CSS -->
|
||||
<link href="{% static 'css/project.css' %}" rel="stylesheet">
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{# { endcompress }#}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div>
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
|
||||
data-target="#navbarMainMenu" aria-controls="navbarMainMenu" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="/static/images/logo.svg" alt="Maidstone Hackspace Logo" id="navbar-logo">
|
||||
Maidstone Hackspace
|
||||
</a>
|
||||
|
||||
<div class="m-b-1">
|
||||
<a id="mini_logo" href="/login">
|
||||
<img src="/static/images/hackspace.png" class="mini-logo">
|
||||
</a>
|
||||
<nav class="navbar navbar-dark navbar-static-top bg-inverse">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">Maidstone Hackspace</a>
|
||||
<button type="button" class="navbar-toggler hidden-sm-up pull-xs-right" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-toggleable-xs" id="bs-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'home' %}">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'chat' %}">Chat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'home' %}">Donate</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'group' %}">Mailing List</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'home' %}">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'about' %}">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="collapse navbar-collapse" id="navbarMainMenu">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'home' %}">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'about' %}">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'chat' %}">Chat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'home' %}">Donate</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'group' %}">Mailing List</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% trans "My Profile" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'account_logout' %}">{% trans "Sign Out" %}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% trans "Sign Up" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% trans "Sign In" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% trans "My Profile" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'account_logout' %}">{% trans "Sign Out" %}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% trans "Sign Up" %}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% trans "Sign In" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
<p>Use this document as a way to quick start any new project.</p>
|
||||
{% endblock content %}
|
||||
{% block content %}
|
||||
<p>Use this document as a way to quick start any new project.</p>
|
||||
{% endblock content %}
|
||||
|
||||
</div> <!-- /container -->
|
||||
<footer class="footer">
|
||||
<div class="m-b-1 navbar-dark bg-inverse"> </div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div mailing-list-signup="" class="google-groups-signup">
|
||||
<h3>Signup and make yourself known</h3>
|
||||
<form class="block" name="signup" method="get" action="https://groups.google.com/group/maidstone-hackspace/boxsubscribe">
|
||||
<label for="groups-email">Email Address</label>
|
||||
<input id="groups-email" name="email" class="required">
|
||||
<button type="submit">Subscribe</button>
|
||||
<a href="http://groups.google.com/group/maidstone-hackspace">View Group</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">©2016 Maidstone Hackspace</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{% block modal %}{% endblock modal %}
|
||||
</div>
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
{% block javascript %}
|
||||
<!-- Required by Bootstrap v4 Alpha 4 -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<span class="text-muted">© 2016 Maidstone Hackspace</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Your stuff: Third-party javascript libraries go here -->
|
||||
{% block modal %}{% endblock modal %}
|
||||
|
||||
<!-- place project specific Javascript in this file -->
|
||||
{% compress js %}
|
||||
<script src="{% static 'js/project.js' %}"></script>
|
||||
{% endcompress %}
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
{% block javascript %}
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
|
||||
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
|
||||
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
|
||||
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
{% endblock javascript %}
|
||||
</body>
|
||||
<!-- Your stuff: Third-party javascript libraries go here -->
|
||||
|
||||
<!-- place project specific Javascript in this file -->
|
||||
{% compress js %}
|
||||
<script src="{% static 'js/project.js' %}"></script>
|
||||
{% endcompress %}
|
||||
|
||||
{% endblock javascript %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"name": "mhackspace",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.0.0-alpha.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
"browser-sync": "^2.14.0",
|
||||
"del": "^2.2.2",
|
||||
"gulp": "^3.9.1",
|
||||
|
|
@ -17,7 +18,6 @@
|
|||
"gulp-uglify": "^2.0.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.2.2"
|
||||
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue