Skip to content

GitLab

Commit 8ccf6a75 authored by Daniel W Bond's avatar Daniel W Bond
Browse files

added new css classes to properly wrap rows of students on mobile regardless... 

added new css classes to properly wrap rows of students on mobile regardless of the text length in name/major(s)
parent 08a7a1de
Hide whitespace changes
Inline Side-by-side
roomlist/accounts/templates/detail_major.html
View file @ 8ccf6a75
......@@ -20,28 +20,28 @@
{% for graduating_year in students %}
<legend>
<a name="{{ graduating_year.grouper }}" href="#{{ graduating_year.grouper }}">{{ graduating_year.grouper|bc }}</a>
<a name="{{ graduating_year.grouper }}" href="#{{ graduating_year.grouper }}">
{{ graduating_year.grouper|bc }}</a>
</legend>
<div class="student-row">
<div class="row">
<div class="col-md-12">
<div class="row">
{% for student in graduating_year.list %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image" src="{{ student.profile_image_url }}" alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><a href="{{ student.get_absolute_url }}"><strong>{{ student.get_full_name_or_uname }}</strong></a></h4>
{% if student.get_flag_count > 4 %}
<p><em>* a number of other floormates say this info is incorrect</em></p>
{% endif %}
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<br />
<div class="row">
{% for student in graduating_year.list %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image"
src="{{ student.profile_image_url }}"
alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><strong>
<a href="{{ student.get_absolute_url }}">{{ student.get_full_name_or_uname }}</a>
</strong></h4>
{% if student.get_flag_count > 4 %}
<p><em>* a number of other floormates say this info is incorrect</em></p>
{% endif %}
{% endfor %}
<br />
</div>
</div>
{% endfor %}
</div>
</div>
{% empty %}
<div class="col-md-12 text-center">
<p>No visible students.</p>
......
roomlist/housing/templates/detail_floor.html
View file @ 8ccf6a75
......@@ -23,24 +23,25 @@
</div>
{% load gravatar %}
<div class="row">
{% for student in students %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image" src="{{ student.profile_image_url }}" alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><a href="{{ student.get_absolute_url }}"><strong>{{ student.get_full_name_or_uname }}</strong></a></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
<h5><a href="{{ student.room.get_absolute_url }}">{{ student.room }}</a></h5>
{% if student.get_flag_count %}
<p><em>*a number of other floormates say this info is incorrect</em></p>
{% endif %}
<div class="student-row">
<div class="row">
{% for student in students %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image"
src="{{ student.profile_image_url }}"
alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><strong>
<a href="{{ student.get_absolute_url }}">{{ student.get_full_name_or_uname }}</a>
</strong></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
<h5><a href="{{ student.room.get_absolute_url }}">{{ student.room }}</a></h5>
{% if student.get_flag_count %}
<p><em>*a number of other floormates say this info is incorrect</em></p>
{% endif %}
<br />
</div>
{% endfor %}
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<br />
<div class="row">
{% endif %}
{% endfor %}
</div>
<br />
......
roomlist/housing/templates/detail_room.html
View file @ 8ccf6a75
......@@ -24,23 +24,24 @@
</div>
{% load gravatar %}
<div class="row">
{% for student in students %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image" src="{{ student.profile_image_url }}" alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><a href="{{ student.get_absolute_url }}"><strong>{{ student.get_full_name_or_uname }}</strong></a></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
{% if student.get_flag_count > 4 %}
<p><em>* a number of other floormates say this info is incorrect</em></p>
{% endif %}
<div class="student-row">
<div class="row">
{% for student in students %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image"
src="{{ student.profile_image_url }}"
alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><strong>
<a href="{{ student.get_absolute_url }}">{{ student.get_full_name_or_uname }}</a>
</strong></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
{% if student.get_flag_count > 4 %}
<p><em>* a number of other floormates say this info is incorrect</em></p>
{% endif %}
<br />
</div>
{% endfor %}
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<br />
<div class="row">
{% endif %}
{% endfor %}
</div>
<br />
......
roomlist/static/css/style.css
View file @ 8ccf6a75
......@@ -137,3 +137,13 @@ outline-offset: none;
min-width: 175px;
min-height: 175px;
}
@media (max-width: 768px) {
.student-row > .row > .col-xs-6:nth-child(2n+1) {
clear: both;
}}
@media (min-width: 768px) {
.student-row > .row > .col-sm-3:nth-child(4n+1) {
clear: both;
}}
roomlist/templates/landing.html
View file @ 8ccf6a75
......@@ -5,14 +5,15 @@
{% include 'messages.html' %}
{% load gravatar %}
{% load humanize %}
{% load cache %}
{% cache 15 landing request.user.username %}
{% load gravatar %}
<h2>Welcome
{% if not me.is_noob %}
Back
{% else %}
{% if not me.is_noob %}
Back,
{% endif %}
{{ me.get_first_name_or_uname }}!</h2>
<hr/>
......@@ -20,91 +21,108 @@ Back
{% if me.on_campus %}
{% if not me.room and me.on_campus %}
<h3><em><a href="{% url 'update_student' request.user.username %}">Select your room</a>, and we'll show you the other students on your floor.</em></h3>
<h3><em>
<a href="{% url 'update_student' request.user.username %}">Select your room</a>,
and we'll show you the other students on your floor.
</em></h3>
{% else %}
{% if roomies|length == 1 %}
<h3>Your Roommate in {{ me.room }}</h3>
<hr/>
{% else %}
<h3>Your Roommates in <a href="{{ me.room.get_absolute_url }}">{{ me.room }}</a></h3>
<hr/>
<h3>Your Roommates in <a href="{{ me.room.get_absolute_url }}">{{ me.room }}</a></h3>
<hr/>
{% endif %}
<div class="row">
{% for student in roomies %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image" src="{{ student.profile_image_url }}" alt="{{ student.get_first_name_or_uname }} profile picture"></img>
<h4><a href="{{ student.get_absolute_url }}"><strong>{{ student.get_full_name_or_uname }}</strong></a></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
</div>
{% if forloop.counter|divisibleby:4 %}
<div class="student-row">
<div class="row">
{% for student in roomies %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image"
src="{{ student.profile_image_url }}"
alt="{{ student.get_first_name_or_uname }} profile picture"></img>
<h4><strong>
<a href="{{ student.get_absolute_url }}">{{ student.get_full_name_or_uname }}</a>
</strong></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
</div>
<br />
<div class="row">
{% endif %}
{% empty %}
<div class="col-md-12">
<h4>There are no other students registered in your room right now.</h4>
</div>
{% endfor %}
</div>
{% empty %}
<div class="col-md-12">
<h4>There are no other students registered in your room right now.</h4>
</div>
{% endfor %}
</div>
</div>
{% load humanize %}
<h3>Your Floormates from
<a href="{{ me.room.floor.get_absolute_url }}">
{{ me.room.floor.building }} {{ me.room.floor.number|ordinal }}</a>
</h3>
<hr/>
<h3>Your Floormates from <a href="{{ me.room.floor.get_absolute_url }}">{{ me.room.floor.building }} {{ me.room.floor.number|ordinal }}</a></h3>
<hr/>
<div class="row">
{% for student in floories %}
<div class="student-row">
<div class="row">
{% for student in floories %}
<div class="col-md-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image" src="{{ student.profile_image_url }}" alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><a href="{{ student.get_absolute_url }}"><strong>{{ student.get_full_name_or_uname }}</strong></a></h4>
<img class="img-circle img-responsive center center-block profile-image"
src="{{ student.profile_image_url }}"
alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><strong>
<a href="{{ student.get_absolute_url }}">{{ student.get_full_name_or_uname }}
</strong></h4>
<h5><em>{% include 'double_major.html' %}</em></h5>
<h5><a href="{{ student.room.get_absolute_url }}">{{ student.room }}</h5></a>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<br />
<div class="row">
{% endif %}
{% empty %}
<div class="col-md-12">
<h4>There are no other students registered on your floor right now.</h4>
</div>
{% endfor %}
</div>
{% empty %}
<div class="col-md-12">
<h4>There are no other students registered on your floor right now.</h4>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endif %}
{% endif %} {% comment %} else not me.room and me.oncampus {% endcomment %}
{% endif %} {% comment %} else me.oncampus {% endcomment %}
{% endcache %}
{% load accounts_extras %}
{% cache 120 landing_majors request.user.username %}
{% if not me.major.all %}
<h3><em><a href="{% url 'update_student' request.user.username %}">Set your major</a>, and we'll show you some of the other students in your program.</em></h3>
<h3><em>
<a href="{% url 'update_student' request.user.username %}">Set your major</a>,
and we'll show you some of the other students in your program.
</em></h3>
{% else %}
{% for major, students in majormates.items %}
<h3>Other Students in <a href="{{ major.get_absolute_url }}">{{ major.name }}</a></h3>
<hr />
<div class="row">
{% for student in students %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image" src="{{ student.profile_image_url }}" alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><a href="{{ student.get_absolute_url }}"><strong>{{ student.get_full_name_or_uname }}</strong></a></h4>
<h5>{{ student.graduating_year|bc }}</h5>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<br />
<div class="row">
{% endif %}
{% empty %}
<div class="col-md-12">
<h4>There are no other students registered in your major right now.</h4>
<div class="student-row">
<div class="row">
{% for student in students %}
<div class="col-sm-3 col-xs-6 text-center">
<img class="img-circle img-responsive center center-block profile-image"
src="{{ student.profile_image_url }}"
alt="{{ student.get_first_name_or_uname }} profile picture">
<h4><strong>
<a href="{{ student.get_absolute_url }}">{{ student.get_full_name_or_uname }}</a>
</strong></h4>
<h5>{{ student.graduating_year|bc }}</h5>
</div>
{% endfor %}
{% empty %}
<div class="col-md-12">
<h4>There are no other students registered in your major right now.</h4>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% endif %}
<br />
<hr />
{% include 'disclaimer.html' %}
{% endcache %}
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment