Skip to content

Commit

Permalink
[ENH] Improve responsive design (#247)
Browse files Browse the repository at this point in the history 
* make election banner more responsive

* make converter table responsive
  • Loading branch information
@Remi-Gau
Remi-Gau authored Sep 12, 2022
1 parent ffbe452 commit 0b7b209
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 89 deletions.
92 changes: 48 additions & 44 deletions _includes/converters_table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,54 @@ <h3>{{ group.name }}</h3>

<p>{{ group.comment }}</p>

<table>
<tr>
<th>Name</th>
<th>Data type</th>
<th>Expected input</th>
<th>Language</th>
<th>Distribution</th>
<th>GUI</th>
<th>Documentation</th>
<th>Comment</th>
<th>License</th>
<th>Updated</th>
</tr>

{% for converter in group.members %}
<tr>
<td>
<a href="{{ converter.url }}" target="_blank">{{ converter.name }}</a>
</td>
<td>{{ converter.data_types }}</td>
<td>{{ converter.expected_input }}</td>
<td>{{ converter.language }}</td>
<td class="distribution">
<ul>
{% for entry in converter.distribution %}
<li>
<a href="{{ entry.name }}" target="_blank">{{ entry.name }}</a>
</li>
{% endfor %}
</ul>
</td>
<td>{{ converter.GUI }}</td>
<td>
{% if converter.documentation %}
<a href="{{ converter.documentation }} " target="_blank">doc</a>
{% endif %}
</td>
<td class="comment">{{ converter.comment }}</td>
<!--Displaying only the year of the latest update as the _data dates are only manually updated at this point.-->
<td>{{ converter.license }}</td>
<td>{{ converter.updated | date: "%Y" }}</td>
</tr>
{% endfor %}
</table>
<div class="table-container">

<table>
<tr>
<th>Name</th>
<th>Data type</th>
<th>Expected input</th>
<th>Language</th>
<th>Distribution</th>
<th>GUI</th>
<th>Documentation</th>
<th>Comment</th>
<th>License</th>
<th>Updated</th>
</tr>

{% for converter in group.members %}
<tr>
<td>
<a href="{{ converter.url }}" target="_blank">{{ converter.name }}</a>
</td>
<td>{{ converter.data_types }}</td>
<td>{{ converter.expected_input }}</td>
<td>{{ converter.language }}</td>
<td class="distribution">
<ul>
{% for entry in converter.distribution %}
<li>
<a href="{{ entry.name }}" target="_blank">{{ entry.name }}</a>
</li>
{% endfor %}
</ul>
</td>
<td>{{ converter.GUI }}</td>
<td>
{% if converter.documentation %}
<a href="{{ converter.documentation }} " target="_blank">doc</a>
{% endif %}
</td>
<td class="comment">{{ converter.comment }}</td>
<!--Displaying only the year of the latest update as the _data dates are only manually updated at this point.-->
<td>{{ converter.license }}</td>
<td>{{ converter.updated | date: "%Y" }}</td>
</tr>
{% endfor %}
</table>

</div>

<br />

Expand Down
21 changes: 11 additions & 10 deletions _includes/steering_group_election_section.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ <h2>BIDS steering group election</h2>
</button>

<h3>
Nomination period closes on: <b>Friday September 23rd at 11:59pm
Nomination period closes on<br>
<b>Friday September 23rd at 11:59pm<br>
(<a href="https://time.is/Anywhere_on_Earth" target="_blank">Anywhere on Earth</a>)</b>.
</h3>

Expand All @@ -34,15 +35,15 @@ <h3>
<a href="mailto:[email protected]">the BIDS maintainers</a>.
</p>

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/-c4PUhTwmz4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<div class="iframe-container">
<iframe
src="https://www.youtube.com/embed/-c4PUhTwmz4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>

</div>

Expand Down
116 changes: 81 additions & 35 deletions _sass/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,56 @@
* The following are modifications to the initial Cayman theme
**/

.converters{
@mixin tablesmall {
@media screen and (max-width: 1340px) {
@content;
}
}

width: 140%;
margin-left: -40%;
.converters{

h3 {
padding: 1rem;
}

table {
font-size: 100%;
width: 120%;
margin-right: 0%;
margin-left: 0%;
}
.table-container {

th,
td {
text-align: center;
vertical-align: middle;
}
font-size: 90%;

overflow: auto;
padding: 0;

width: 160%;
margin-left: -30%;

.distribution {
text-align: justify;
ul {
padding-left: 15%;
@include tablesmall {
width: 100%;
margin-left: 0%;
}

table {
margin-right: 0%;
padding: 0;
}

th,
td {
text-align: center;
vertical-align: middle;
}
}

.comment {
text-align: justify;
font-size: 90%;

.distribution {
text-align: justify;
ul {
padding-left: 15%;
}
}

.comment {
text-align: justify;
font-size: 90%;
}

}

}
Expand All @@ -51,35 +69,63 @@
}

.election-banner {

margin-top : 1rem;
padding-bottom : 1rem;

border: 10px solid #aa0000;

padding-bottom : 1rem;

margin-top : 1rem;
margin-left: 20%;
margin-right: 20%;

text-align: center;

h2, h3{
p, h2, h3{
padding-bottom : 1rem;
}

iframe{
padding-top : 1rem;
}

p {
padding-right: 5%;
padding-left: 5%;
text-align: center;
font-size: 18px;
}

@include medium {
border: 5px solid #aa0000;
margin-left: 5%;
margin-right: 5%;
p {
text-align: justify;
}
}

@include small {
border: 5px solid #aa0000;
margin-left: 5%;
margin-right: 5%;
p {
text-align: justify;
}
}

button{
color: #000000;
margin: 0.5rem;
padding: 0.5rem;
font-size: 20px;
}

.iframe-container{
position: relative;
width: 90%;
margin-left: 5%;
padding-bottom: 56.25%;
height: 0;

iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
}
}

Expand Down

0 comments on commit 0b7b209

Please sign in to comment.