Skip to content

Commit

Permalink
Merge pull request #459 from ox-it/styling-improvements
Browse files Browse the repository at this point in the history 
Styling improvements
  • Loading branch information
@ahaith
ahaith committed May 6, 2016
2 parents 4bbc6c3 + 1ce21b3 commit 7309290
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 74 deletions.
54 changes: 53 additions & 1 deletion static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,28 @@
color: #AAA;
}

.navbar-form {
border-top: 0px;
}


.navbar-form .btn-default {
float: right;
}

.navbar-form #id_q {
width: 100%;
}

.navbar-form .form-group {
overflow: hidden;
padding-right: .2em;
}

.nav-list>li>a {
padding: 11px 0px;
}

.navbar-default .navbar-nav>li>a:hover {
color: #CCC;
}
Expand Down Expand Up @@ -171,6 +193,11 @@ a.formatting-link:hover {
min-width: 250px;
margin-left: -90px;
}
@media (max-width: 767px) {
.dropdown-menu {
margin-left: 0px;
}
}

.contains-floating-buttons {
min-height: 40px;
Expand All @@ -184,6 +211,27 @@ a.formatting-link:hover {
.nav-tabs.nav-justified a {
white-space: nowrap;
}
.nav-tabs.nav-justified {
padding-bottom: 30px;
}
@media (max-width: 767px) {
.nav-tabs.nav-justified li {
display:table-cell;
font-size: 0.9em;
}
.nav-tabs.nav-justified li a{
padding: 5px;
}
ul.nav-tabs.nav-justified{
text-align: -webkit-center;
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.resp-width {
width: 100%;
margin: 3px 0px;
}
}
div.add-to-collections,
div.manage-lists-buttons {
display: inline-block;
Expand Down Expand Up @@ -253,6 +301,10 @@ div.share-this-links span {
background-color: #f5f5f5;
}

.teaser-talk-title {
font-size: 1.1em;
}

@media (max-width: 767px) {
#navbar-oxford-brandmark {
margin-right: 5px;
Expand All @@ -269,4 +321,4 @@ div.share-this-links span {
.navbar-header a.navbar-brand {
font-size: 20px;
}
}
}
9 changes: 5 additions & 4 deletions talks/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,11 @@
{% endif %}
</ul>
<form class="navbar-form navbar-right search-form" role="search" method="get" action="{% url 'haystack_search' %}">
<div class="form-group">
<input id="id_q" name="q" type="text" class="form-control" placeholder="Search" value="{% block search_query %}{% endblock search_query %}" />
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
<button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
<div class="form-group">
<input id="id_q" name="q" type="text" class="form-control" placeholder="Search" value="{% block search_query %}{% endblock search_query %}"/>
</div>​

</form>
</div>
</div>
Expand Down
139 changes: 89 additions & 50 deletions talks/templates/events/browse.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,28 @@
<link href="{% static "css/typeahead.css"%}" rel="stylesheet">

<script src="{% static "js/form-controls.js"%}"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.panel-collapse').on('show.bs.collapse', function (ev) {
$('.panel-collapse').removeClass('in');
})

showCollapsible();
});

$(window).resize(function(){
showCollapsible();
});

function showCollapsible(){
if ($(window).width() >= 767){
$('.panel-collapse').addClass('in');
}
if ($(window).width() <= 767){
$('.panel-collapse').removeClass('in');
}
}
</script>
{% endblock %}


Expand All @@ -32,50 +53,65 @@
<div class="row">
<div class="col-sm-3 col-xs-12">

<div class="visible-xs">
<a data-toggle="collapse" href="#collapse-browse" class="btn btn-primary">Browse</a>
<!-- these lines make filters and date range tabs expand separately-->
<!-- <a data-toggle="collapse" href="#collapse-filters"><h3>Filters</h3></a> -->
<!-- <a data-toggle="collapse" href="#collapse-date-range-tabs" class="btn btn-primary">Date range tabs</a> -->
<a data-toggle="collapse" href="#" data-target="#collapse-date-range-tabs,#collapse-filters" class="btn btn-primary">Filter</a>
</div>

{% include 'events/navigation_for_listing.html' %}


<h3>Filters</h3>
<ul class="nav nav-list well">
<form action="{% url 'browse_events' %}" method="get">
{{ browse_events_form.start_date | bootstrap }}
<a id="clear-datepicker" class="pull-right" href="#">clear</a>
{{ browse_events_form.to | bootstrap }}
{{ browse_events_form.organising_department | bootstrap }}
{{ browse_events_form.include_subdepartments | bootstrap }}
{{ browse_events_form.seriesid | bootstrap }}
{{ browse_events_form.venue | bootstrap }}

<a href="{% url 'browse_events' %}" class="btn btn-default pull-left">Reset Filters</a>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</form>

<script type="text/javascript">



$(document).ready(function(){

$('#clear-datepicker').click(function(e){
$('#to').data("DateTimePicker").clear();
});

$('.js-datetimepicker').datetimepicker({
format : 'YYYY-MM-DD',
allowInputToggle : true
}).each(function(i,v){
$(v).data("DateTimePicker").ignoreReadonly(true);
});

$('#start_date').on('dp.change', function(e){
$('#to').data('DateTimePicker').minDate(e.date);
});

});
</script>
<div class="panel-group" data-parent="collapse-menu-group">
<h3 class="hidden-xs">Filters</h3>

<div id="collapse-filters" class="panel-collapse collapse" data-parent="collapse-menu-group">
<ul class="nav nav-list well">
<form action="{% url 'browse_events' %}" method="get">
{{ browse_events_form.start_date | bootstrap }}
<a id="clear-datepicker" class="pull-right" href="#">clear</a>
{{ browse_events_form.to | bootstrap }}
{{ browse_events_form.organising_department | bootstrap }}
{{ browse_events_form.include_subdepartments | bootstrap }}
{{ browse_events_form.seriesid | bootstrap }}
{{ browse_events_form.venue | bootstrap }}

<a href="{% url 'browse_events' %}" class="btn btn-default pull-left resp-width">Reset Filters</a>
<button type="submit" class="btn btn-primary pull-right resp-width">Submit</button>
</form>

<script type="text/javascript">
$(document).ready(function(){

$('#clear-datepicker').click(function(e){
$('#to').data("DateTimePicker").clear();
});

$('.js-datetimepicker').datetimepicker({
format : 'YYYY-MM-DD',
allowInputToggle : true
}).each(function(i,v){
$(v).data("DateTimePicker").ignoreReadonly(true);
});

$('#start_date').on('dp.change', function(e){
$('#to').data('DateTimePicker').minDate(e.date);
});

});
</script>

</ul>
</div>
</div>






</ul>
</div>

</div>
Expand All @@ -86,16 +122,19 @@ <h3>Filters</h3>

{% block main %}


<ul class="nav nav-tabs nav-justified">
{% for tab in tab_dates %}
<li role="presentation" {% if tab.active %}class="active"{% endif %}>
<a href="{{tab.href}}">
{{tab.label}}
</a>
</li>
{% endfor %}
</ul>
<div class="panel-group">
<div id="collapse-date-range-tabs" class="panel-collapse collapse">
<ul class="nav nav-tabs nav-justified">
{% for tab in tab_dates %}
<li role="presentation" {% if tab.active %}class="active"{% endif %}>
<a href="{{tab.href}}">
{{tab.label}}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>

<div class="js-upcoming-events">
{% if grouped_events %}
Expand Down
9 changes: 4 additions & 5 deletions talks/templates/events/event_teaser.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
{% endif %}
</strong>

<a href="{% url 'show-event' event.slug %}" class="list-group-item-heading">
- <u>{% if event.title_display %}{{ event.title_display }}{% else %}{{ event.title }}{% endif %}</u>
<a href="{% url 'show-event' event.slug %}" class="list-group-item-heading teaser-talk-title">
- <b>{% if event.title_display %}{{ event.title_display }}{% else %}{{ event.title }}{% endif %}</b>
</a>
{% if event.special_message %}
<br><span class="teaser-special-message">{{ event.special_message }}</span>
Expand All @@ -41,10 +41,9 @@
{% if event.various_speakers %}
Various Speakers
{% else %}
Speaker{{ event.speakers|pluralize }}:
{% for speaker in event.speakers %}
{% if speaker.slug %}
<b><a href="{% url 'show-person' speaker.slug %}" class="teaser-speaker">{{ speaker.name}}{% if speaker.bio %} ({{ speaker.bio }}){% endif %}</a></b>{% if not forloop.last %}, {% endif %}
<a href="{% url 'show-person' speaker.slug %}" class="teaser-speaker"><b>{{ speaker.name}}</b>{% if speaker.bio %} ({{ speaker.bio }}){% endif %}</a>{% if not forloop.last %}, {% endif %}
{% else %}
<!-- Search result -->
<b>{{ speaker}}</b>{% if not forloop.last %}, {% endif %}
Expand All @@ -59,7 +58,7 @@
Part of: <a href="{% url 'show-event-group' event.group_slug %}">{{event.group}}</a>
{% else %}
{% if event.group %}
<br><a href="{{ event.group.get_absolute_url }}"><u>{{ event.group.title }}</u></a>
<br><a href="{{ event.group.get_absolute_url }}">{{ event.group.title }}</a>
{% endif %}
{% endif %}
{% endif %}
Expand Down
34 changes: 20 additions & 14 deletions talks/templates/events/navigation_for_listing.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<ul class="nav nav-list well">
<li>
<a href="{% url 'browse_events' %}">All Talks</a>
</li>
<li>
<a href="{% url 'list-event-groups' %}">Lecture/Seminar Series</a>
</li>
<li>
<a href="{% url 'list-public-lists' %}">Talk Collections</a>
</li>
<li>
<a href="{% url 'browse-topics' %}">Topics</a>
</li>
</ul>

<div class="panel-group" data-parent="collapse-menu-group">

<div id="collapse-browse" class="panel-collapse collapse" data-parent="collapse-menu-group">
<ul class="nav nav-list well">
<li>
<a href="{% url 'browse_events' %}">All Talks</a>
</li>
<li>
<a href="{% url 'list-event-groups' %}">Lecture/Seminar Series</a>
</li>
<li>
<a href="{% url 'list-public-lists' %}">Talk Collections</a>
</li>
<li>
<a href="{% url 'browse-topics' %}">Topics</a>
</li>
</ul>
</div>
</div>

0 comments on commit 7309290

Please sign in to comment.