Permalink
Browse files

Update desktop-table style (#2233)

  • Loading branch information...
1 parent 290c62a commit aa486f9a2939d5cf1cf90599f194a18eb6077737 @dsoegijono dsoegijono committed with psgs Dec 10, 2016
Showing with 109 additions and 69 deletions.
  1. +75 −69 _includes/desktop-table.html
  2. +34 −0 css/base.scss
@@ -25,86 +25,92 @@
{% endif %}
<tr class="desktop-tr">
{% if website.status %}
- <td class="main progress">
- {% if website.img %}
- <noscript><img src="/img/{{ section_id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
- <img src="/img/placeholder.png" data-src="/img/{{ section_id }}/{{ website.img }}" class="icon"
- alt="{{ website.name }}">
- {% endif %}
- <a href="{{ website.url }}">{{ website.name }}</a>
- {% include exception.html website=website %}
- <span class="progress">
+ <td class="main progress">
+ <div class="title">
+ {% if website.img %}
+ <noscript><img src="/img/{{ section_id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
+ <img src="/img/placeholder.png" data-src="/img/{{ section_id }}/{{ website.img }}" class="icon"
+ alt="{{ website.name }}">
+ {% endif %}
+ <a class="title-name" href="{{ website.url }}">{{ website.name }}</a>
+ {% include exception.html website=website %}
+ </div>
+ <div class="progress-info">
<a class="ui mini orange button" href="{{website.status}}" target="_blank">
<i class="star icon"></i> In Progress!
</a>
- </span>
- </td>
- <td class="twitter progress" colspan="6">
- <a class="ui twitter mini button"
- href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{progress_tweet|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}"
- target="_blank"><i class="twitter icon"></i> {{page.link_progress}}</a>
- </td>
+ </div>
+ </td>
+ <td class="twitter progress" colspan="6">
+ <a class="ui twitter mini button"
+ href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{progress_tweet|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}"
+ target="_blank"><i class="twitter icon"></i> {{page.link_progress}}</a>
+ </td>
{% elsif website.tfa %}
- <td class="main positive">
- {% if website.img %}
- <noscript><img src="/img/{{ section_id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
- <img src="/img/placeholder.png" data-src="/img/{{ section_id }}/{{ website.img }}" class="icon"
- alt="{{ website.name }}">
- {% endif %}
- <a href="{{ website.url }}">{{ website.name }}</a>
- {% include exception.html website=website %}
- </td>
+ <td class="main positive">
+ <div class="title">
+ {% if website.img %}
+ <noscript><img src="/img/{{ section_id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
+ <img src="/img/placeholder.png" data-src="/img/{{ section_id }}/{{ website.img }}" class="icon"
+ alt="{{ website.name }}">
+ {% endif %}
+ <a class="title-name" href="{{ website.url }}">{{ website.name }}</a>
+ {% include exception.html website=website %}
+ </div>
+ </td>
- <td class="positive icon">
- {% if website.doc %}
- <a href="{{ website.doc }}"><i class="external url link large icon"></i></a>
- {% endif %}
- </td>
+ <td class="positive icon">
+ {% if website.doc %}
+ <a href="{{ website.doc }}"><i class="external url link large icon"></i></a>
+ {% endif %}
+ </td>
- <td class="positive icon">
- {% if website.sms %}
- <i class="checkmark large icon" title="SMS"></i>
- {% endif %}
- </td>
+ <td class="positive icon">
+ {% if website.sms %}
+ <i class="checkmark large icon" title="SMS"></i>
+ {% endif %}
+ </td>
- <td class="positive icon">
- {% if website.phone %}
- <i class="checkmark large icon" title="Phone"></i>
- {% endif %}
- </td>
+ <td class="positive icon">
+ {% if website.phone %}
+ <i class="checkmark large icon" title="Phone"></i>
+ {% endif %}
+ </td>
- <td class="positive icon">
- {% if website.email %}
- <i class="checkmark large icon" title="Email"></i>
- {% endif %}
- </td>
+ <td class="positive icon">
+ {% if website.email %}
+ <i class="checkmark large icon" title="Email"></i>
+ {% endif %}
+ </td>
- <td class="positive icon">
- {% if website.hardware %}
- <i class="checkmark large icon" title="Hardware Token"></i>
- {% endif %}
- </td>
+ <td class="positive icon">
+ {% if website.hardware %}
+ <i class="checkmark large icon" title="Hardware Token"></i>
+ {% endif %}
+ </td>
- <td class="positive icon">
- {% if website.software %}
- <i class="checkmark large icon" title="Software Token"></i>
- {% endif %}
- </td>
+ <td class="positive icon">
+ {% if website.software %}
+ <i class="checkmark large icon" title="Software Token"></i>
+ {% endif %}
+ </td>
{% else %}
- <td class="main negative">
- {% if website.img %}
- <noscript><img src="/img/{{ section_id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
- <img src="/img/placeholder.png" data-src="/img/{{ section_id }}/{{ website.img }}" class="icon"
- alt="{{ website.name }}">
- {% endif %}
- <a href="{{ website.url }}">{{ website.name }}</a>
- {% include exception.html website=website %}
- </td>
- <td class="twitter negative" colspan="6">
- {% if website.twitter %} <a class="ui twitter mini button" href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{workonit_tweet|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}" target="_blank"><i class="twitter icon"></i> {{page.link}} on Twitter</a>{% endif %}
- {% if website.facebook %} <a class="ui facebook mini button" href="https://facebook.com/{{website.facebook}}/" target="_blank"><i class="facebook icon"></i> {{page.link}} on Facebook</a>{%endif%}
- {% if website.email_address %} <a class="ui green mini button" href="mailto:{{website.email_address}}?subject=Support%20Two%20Factor%20Authentication" target="_blank"><i class="mail icon"></i>{{page.link}} via Email</a>{% endif %}
- </td>
+ <td class="main negative">
+ <div class="title">
+ {% if website.img %}
+ <noscript><img src="/img/{{ section_id }}/{{ website.img }}" class="icon" alt="{{ website.name }}"></noscript>
+ <img src="/img/placeholder.png" data-src="/img/{{ section_id }}/{{ website.img }}" class="icon"
+ alt="{{ website.name }}">
+ {% endif %}
+ <a class="title-name" href="{{ website.url }}">{{ website.name }}</a>
+ {% include exception.html website=website %}
+ </div>
+ </td>
+ <td class="twitter negative" colspan="6">
+ {% if website.twitter %} <a class="ui twitter mini button" href="https://twitter.com/share?url={{site.url|cgi_escape}}&amp;text={{workonit_tweet|replace:'TWITTERHANDLE',website.twitter|cgi_escape}}&amp;hashtags={{page.hash|cgi_escape}}" target="_blank"><i class="twitter icon"></i> {{page.link}} on Twitter</a>{% endif %}
+ {% if website.facebook %} <a class="ui facebook mini button" href="https://facebook.com/{{website.facebook}}/" target="_blank"><i class="facebook icon"></i> {{page.link}} on Facebook</a>{%endif%}
+ {% if website.email_address %} <a class="ui green mini button" href="mailto:{{website.email_address}}?subject=Support%20Two%20Factor%20Authentication" target="_blank"><i class="mail icon"></i>{{page.link}} via Email</a>{% endif %}
+ </td>
{% endif %}
</tr>
{% endfor %}
View
@@ -231,6 +231,39 @@ input[type=search] {
.ui.table td {
&.main {
line-height: 2em;
+
+ .title {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-align: center;
+ align-items: center;
+
+ a.title-name {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ flex: 1;
+ padding-left: 0;
+ line-height: 1.5;
+ }
+ }
+
+ .progress-info {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-justify-content: center;
+ justify-content: center;
+
+ a {
+ width: 120px;
+ min-width: 120px;
+ padding-left: 0;
+ }
+ }
}
&.icon {
@@ -247,6 +280,7 @@ td img.icon,
border-radius: 50%;
float: left;
padding: 4px 4px;
+ width: 2em;
height: 2em;
width: 2em;
line-height: 1;

0 comments on commit aa486f9

Please sign in to comment.