mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-09-18 21:50:56 +00:00
Refactoring splash modules to keep padding and margin consistent in comfortable/compact and narrow/wide configurations.
This commit is contained in:
Samuel Clay
parent
9c115ebbb7
commit
2cfd03af15
4 changed files with 111 additions and 102 deletions
|
|
@ -148,8 +148,11 @@ hr {
|
|||
}
|
||||
|
||||
.NB-account-wide {
|
||||
max-width: 38%;
|
||||
flex: 1;
|
||||
margin: 24px 24px 32px 0;
|
||||
}
|
||||
.NB-dashboard-account {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
|
@ -5906,13 +5909,14 @@ form.opml_import_form input {
|
|||
display: block;
|
||||
}
|
||||
.NB-splash-modules .NB-modules-center,
|
||||
.NB-splash-modules .NB-account-wide {
|
||||
.NB-splash-modules .NB-dashboard-account {
|
||||
max-width: none;
|
||||
}
|
||||
.NB-splash-modules .NB-modules-center {
|
||||
.NB-splash-modules .NB-modules-center,
|
||||
.NB-splash-modules .NB-account-wide {
|
||||
margin-right: 0;
|
||||
}
|
||||
.NB-splash-modules .NB-account-wide {
|
||||
.NB-splash-modules .NB-dashboard-account {
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -5920,37 +5924,39 @@ form.opml_import_form input {
|
|||
display: block;
|
||||
}
|
||||
.NB-dashboard-columns-single .NB-splash-modules .NB-modules-center,
|
||||
.NB-dashboard-columns-single .NB-splash-modules .NB-account-wide {
|
||||
.NB-dashboard-columns-single .NB-splash-modules .NB-dashboard-account {
|
||||
max-width: none;
|
||||
}
|
||||
.NB-dashboard-columns-single .NB-splash-modules .NB-modules-center {
|
||||
margin-right: 0;
|
||||
}
|
||||
.NB-dashboard-columns-single .NB-splash-modules .NB-modules-center,
|
||||
.NB-dashboard-columns-single .NB-splash-modules .NB-account-wide {
|
||||
margin: 0 24px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.NB-dashboard-columns-triple .NB-splash-modules {
|
||||
display: block;
|
||||
}
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-modules-center,
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-account-wide {
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-dashboard-account {
|
||||
max-width: none;
|
||||
}
|
||||
.NB-dashboard-columns-triple .NB-dashboard-rivers-left .NB-module-header {
|
||||
.NB-dashboard-columns-triple .NB-dashboard-rivers-left .NB-module-header,
|
||||
.NB-dashboard-columns-triple .NB-dashboard-rivers-right .NB-module-header {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
.NB-density-compact.NB-dashboard-columns-triple .NB-dashboard-rivers-left .NB-module-header {
|
||||
.NB-density-compact.NB-dashboard-columns-triple .NB-dashboard-rivers-left .NB-module-header,
|
||||
.NB-density-compact.NB-dashboard-columns-triple .NB-dashboard-rivers-right .NB-module-header {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-modules-center {
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-modules-center,
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-account-wide {
|
||||
margin: 24px 0 0;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.NB-density-compact.NB-dashboard-columns-triple .NB-splash-modules .NB-modules-center {
|
||||
.NB-density-compact.NB-dashboard-columns-triple .NB-splash-modules .NB-modules-center,
|
||||
.NB-density-compact.NB-dashboard-columns-triple .NB-splash-modules .NB-account-wide {
|
||||
margin: 4px 0 0;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-account-wide {
|
||||
.NB-dashboard-columns-triple .NB-splash-modules .NB-dashboard-account {
|
||||
margin: 0 24px;
|
||||
}
|
||||
.NB-dashboard-columns-triple .NB-dashboard-rivers-left,
|
||||
|
|
@ -7633,7 +7639,8 @@ form.opml_import_form input {
|
|||
/* = Center Modules = */
|
||||
/* ================== */
|
||||
|
||||
.NB-modules-center {
|
||||
.NB-modules-center,
|
||||
.NB-account-wide {
|
||||
margin: 24px 12px 0 0px;
|
||||
padding: 0 24px;
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<svg width="107px" height="107px" viewBox="0 0 107 107" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>add-list</title>
|
||||
<g id="add-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="noun-add-to-list-1913842-95978E" transform="translate(53.666000, 53.000000) scale(-1, 1) translate(-53.666000, -53.000000) translate(11.000000, 17.000000)" fill="#95968E" fill-rule="nonzero">
|
||||
<g id="noun-add-to-list-1913842-95978E" transform="translate(53.666000, 53.000000) scale(-1, -1) translate(-53.666000, -53.000000) translate(11.000000, 17.000000)" fill="#95968E" fill-rule="nonzero">
|
||||
<path d="M4,8 L49.332,8 C51.5429,8 53.332,6.2109 53.332,4 C53.332,1.7891 51.5429,0 49.332,0 L4,0 C1.7891,0 0,1.7891 0,4 C0,6.2109 1.7891,8 4,8 Z" id="Path"></path>
|
||||
<path d="M4,24 L49.332,24 C51.5429,24 53.332,22.2109 53.332,20 C53.332,17.7891 51.5429,16 49.332,16 L4,16 C1.7891,16 0,17.7891 0,20 C0,22.2109 1.7891,24 4,24 Z" id="Path"></path>
|
||||
<path d="M4,40 L49.332,40 C51.5429,40 53.332,38.2109 53.332,36 C53.332,33.7891 51.5429,32 49.332,32 L4,32 C1.7891,32 0,33.7891 0,36 C0,38.2109 1.7891,40 4,40 Z" id="Path"></path>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
|
@ -62,96 +62,98 @@
|
|||
|
||||
{% render_dashboard_rivers_right dashboard_rivers %}
|
||||
|
||||
{% render_features_module %}
|
||||
<div class="NB-dashboard-account">
|
||||
{% render_features_module %}
|
||||
|
||||
{% if recommended_feeds %}
|
||||
{% render_recommended_feed recommended_feeds %}
|
||||
{% endif %}
|
||||
{% if recommended_feeds %}
|
||||
{% render_recommended_feed recommended_feeds %}
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_staff and unmoderated_feeds %}
|
||||
{% render_recommended_feed unmoderated_feeds 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% render_account_module %}
|
||||
|
||||
<div class="NB-account NB-module">
|
||||
<h5 class="NB-module-header">
|
||||
NewsBlur
|
||||
</h5>
|
||||
|
||||
<div class="NB-account-left">
|
||||
{% render_statistics_graphs statistics %}
|
||||
</div>
|
||||
<div class="NB-account-right">
|
||||
<div class="NB-module NB-module-account">
|
||||
<!-- <h5 class="NB-module-header">
|
||||
<div class="NB-module-account-settings NB-javascript"></div>
|
||||
Welcome, <span class="NB-module-account-username">{{ user.username }}</span>
|
||||
</h5> -->
|
||||
|
||||
<div class="NB-module-item">
|
||||
<h3 class="NB-module-content-header">
|
||||
<div class="NB-module-content-subtitle NB-module-content-account-realtime-subtitle"></div>
|
||||
<div class="NB-module-content-account-realtime" title=""></div>
|
||||
Your account
|
||||
</h3>
|
||||
<div class="NB-module-stats-counts">
|
||||
<div class="NB-module-stats-count NB-module-account-subscription">
|
||||
<div class="NB-module-stats-count-number"></div>
|
||||
<div class="NB-module-stats-count-description">
|
||||
{% if user_profile.is_pro %}
|
||||
Premium Pro subscription
|
||||
{% elif user_profile.is_archive %}
|
||||
Premium Archive subscription
|
||||
{% elif user_profile.is_premium %}
|
||||
Premium subscription
|
||||
{% else %}
|
||||
Free account
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-module-stats-count">
|
||||
<div class="NB-module-stats-count-number NB-module-stats-count-number-sites">{{ feed_count|commify }}</div>
|
||||
<div class="NB-module-stats-count-description">{{ feed_count|pluralize:"Site,Sites" }}</div>
|
||||
</div>
|
||||
{% if social_profile.shared_stories_count %}
|
||||
<div class="NB-module-stats-count">
|
||||
<div class="NB-module-stats-count-number">{{ social_profile.shared_stories_count|commify }}</div>
|
||||
<div class="NB-module-stats-count-description">Shared stor{{ social_profile.shared_stories_count|pluralize:"y,ies" }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if social_profile.follower_count %}
|
||||
<div class="NB-module-stats-count">
|
||||
<div class="NB-module-stats-count-number">{{ social_profile.follower_count|commify }}</div>
|
||||
<div class="NB-module-stats-count-description">Follower{{ social_profile.follower_count|pluralize }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% render_manage_module %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="NB-module-search NB-module">
|
||||
<h5 class="NB-module-header">
|
||||
Search Sites and People
|
||||
</h5>
|
||||
{% if user.is_staff and unmoderated_feeds %}
|
||||
{% render_recommended_feed unmoderated_feeds 1 %}
|
||||
{% endif %}
|
||||
|
||||
<div class="NB-module-search-container">
|
||||
<div class="NB-module-search-input NB-module-search-sites">
|
||||
<div class="NB-search-close"></div>
|
||||
<label for="search_site"><img src="{{ MEDIA_URL }}img/reader/search_light.png"></label>
|
||||
<input id="search_site" name="search_site" placeholder="Site name or address...">
|
||||
{% render_account_module %}
|
||||
|
||||
<div class="NB-account NB-module">
|
||||
<h5 class="NB-module-header">
|
||||
NewsBlur
|
||||
</h5>
|
||||
|
||||
<div class="NB-account-left">
|
||||
{% render_statistics_graphs statistics %}
|
||||
</div>
|
||||
<div class="NB-module-search-input NB-module-search-people">
|
||||
<div class="NB-search-close"></div>
|
||||
<label for="search_people"><img src="{{ MEDIA_URL }}img/reader/search_light.png"></label>
|
||||
<input id="search_people" name="search_people" placeholder="Username or email...">
|
||||
<div class="NB-account-right">
|
||||
<div class="NB-module NB-module-account">
|
||||
<!-- <h5 class="NB-module-header">
|
||||
<div class="NB-module-account-settings NB-javascript"></div>
|
||||
Welcome, <span class="NB-module-account-username">{{ user.username }}</span>
|
||||
</h5> -->
|
||||
|
||||
<div class="NB-module-item">
|
||||
<h3 class="NB-module-content-header">
|
||||
<div class="NB-module-content-subtitle NB-module-content-account-realtime-subtitle"></div>
|
||||
<div class="NB-module-content-account-realtime" title=""></div>
|
||||
Your account
|
||||
</h3>
|
||||
<div class="NB-module-stats-counts">
|
||||
<div class="NB-module-stats-count NB-module-account-subscription">
|
||||
<div class="NB-module-stats-count-number"></div>
|
||||
<div class="NB-module-stats-count-description">
|
||||
{% if user_profile.is_pro %}
|
||||
Premium Pro subscription
|
||||
{% elif user_profile.is_archive %}
|
||||
Premium Archive subscription
|
||||
{% elif user_profile.is_premium %}
|
||||
Premium subscription
|
||||
{% else %}
|
||||
Free account
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-module-stats-count">
|
||||
<div class="NB-module-stats-count-number NB-module-stats-count-number-sites">{{ feed_count|commify }}</div>
|
||||
<div class="NB-module-stats-count-description">{{ feed_count|pluralize:"Site,Sites" }}</div>
|
||||
</div>
|
||||
{% if social_profile.shared_stories_count %}
|
||||
<div class="NB-module-stats-count">
|
||||
<div class="NB-module-stats-count-number">{{ social_profile.shared_stories_count|commify }}</div>
|
||||
<div class="NB-module-stats-count-description">Shared stor{{ social_profile.shared_stories_count|pluralize:"y,ies" }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if social_profile.follower_count %}
|
||||
<div class="NB-module-stats-count">
|
||||
<div class="NB-module-stats-count-number">{{ social_profile.follower_count|commify }}</div>
|
||||
<div class="NB-module-stats-count-description">Follower{{ social_profile.follower_count|pluralize }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% render_manage_module %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="NB-module-search NB-module">
|
||||
<h5 class="NB-module-header">
|
||||
Search Sites and People
|
||||
</h5>
|
||||
|
||||
<div class="NB-module-search-container">
|
||||
<div class="NB-module-search-input NB-module-search-sites">
|
||||
<div class="NB-search-close"></div>
|
||||
<label for="search_site"><img src="{{ MEDIA_URL }}img/reader/search_light.png"></label>
|
||||
<input id="search_site" name="search_site" placeholder="Site name or address...">
|
||||
</div>
|
||||
<div class="NB-module-search-input NB-module-search-people">
|
||||
<div class="NB-search-close"></div>
|
||||
<label for="search_people"><img src="{{ MEDIA_URL }}img/reader/search_light.png"></label>
|
||||
<input id="search_people" name="search_people" placeholder="Username or email...">
|
||||
</div>
|
||||
<div class="NB-module-search-results"></div>
|
||||
</div>
|
||||
<div class="NB-module-search-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue