mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #11538 from nextcloud/heading-bold 

Set headings to Semibold for better information architecture
This commit is contained in:
Marin Treselj 2018-10-03 10:09:57 +02:00 committed by GitHub
parent 6979b2ea0c 26e952f3f2
commit a92e8b4c18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/files_sharing/css/public.scss
View File

@ -170,7 +170,6 @@ thead {
position: relative; position: relative;
font-weight: 300; font-weight: 300;
font-size: 11px; font-size: 11px;
opacity: .57;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

10
core/css/apps.scss
View File

@ -18,16 +18,20 @@
/* BASE STYLING ------------------------------------------------------------ */ /* BASE STYLING ------------------------------------------------------------ */
h2,
h3,
h4 {
font-weight: 600;
}
h2 { h2 {
font-size: 20px; font-size: 20px;
font-weight: 300;
margin-bottom: 12px; margin-bottom: 12px;
line-height: 140%; line-height: 140%;
} }
h3 { h3 {
font-size: 15px; font-size: 15px;
font-weight: 300;
margin: 12px 0; margin: 12px 0;
} }
@ -842,7 +846,7 @@ $popovericon-size: 16px;
// Required right-distance is half menu icon size + right padding // Required right-distance is half menu icon size + right padding
// = 16px/2 + 14px = 22px // = 16px/2 + 14px = 22px
// popover right margin is 5px, arrow width is 9px to center and border is 1px // popover right margin is 5px, arrow width is 9px to center and border is 1px
// 22px - 9px - 5px - 1px = 7px // 22px - 9px - 5px - 1px = 7px
right: 7px; right: 7px;
/* change this to adjust the arrow position */ /* change this to adjust the arrow position */
border: solid transparent; border: solid transparent;

8
core/css/guest.css
View File

@ -53,15 +53,19 @@ em {
} }
/* heading styles */ /* heading styles */
h2,
h3,
h4 {
font-weight: 600;
}
h2 { h2 {
font-size: 20px; font-size: 20px;
font-weight: 300;
margin-bottom: 12px; margin-bottom: 12px;
line-height: 140%; line-height: 140%;
} }
h3 { h3 {
font-size: 15px; font-size: 15px;
font-weight: 300;
margin: 12px 0; margin: 12px 0;
} }

2
core/css/header.scss
View File

@ -212,7 +212,7 @@
.header-appname { .header-appname {
color: var(--color-primary-text); color: var(--color-primary-text);
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 600;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-right: 5px; padding-right: 5px;

9
settings/css/settings.scss
View File

@ -104,6 +104,11 @@ input {
display: inline-grid; display: inline-grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
/* Same font-weight exception as for .personal-settings-container */
> div h3 {
font-weight: 300;
}
} }
.personal-show-container { .personal-show-container {
@ -213,12 +218,14 @@ select {
clear: both; clear: both;
} }
> div { > div {
h2 { h3 {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
font-weight: 300;
> label { > label {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

6
settings/js/federationsettingsview.js
View File

@ -62,7 +62,7 @@
render: function() { render: function() {
var self = this; var self = this;
_.each(this._inputFields, function(field) { _.each(this._inputFields, function(field) {
var $icon = self.$('#' + field + 'form h2 > .federation-menu'); var $icon = self.$('#' + field + 'form h3 > .federation-menu');
var scopeMenu = new OC.Settings.FederationScopeMenu({field: field}); var scopeMenu = new OC.Settings.FederationScopeMenu({field: field});
self.listenTo(scopeMenu, 'select:scope', function(scope) { self.listenTo(scopeMenu, 'select:scope', function(scope) {
@ -189,8 +189,8 @@
}, },
_setFieldScopeIcon: function(field, scope) { _setFieldScopeIcon: function(field, scope) {
var $icon = this.$('#' + field + 'form > h2 .icon-federation-menu'); var $icon = this.$('#' + field + 'form > h3 .icon-federation-menu');
$icon.removeClass('icon-password'); $icon.removeClass('icon-password');
$icon.removeClass('icon-contacts-dark'); $icon.removeClass('icon-contacts-dark');
$icon.removeClass('icon-link'); $icon.removeClass('icon-link');

38
settings/templates/settings/personal/personal.info.php
View File

@ -40,14 +40,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
<div id="personal-settings-avatar-container" class="personal-settings-container"> <div id="personal-settings-avatar-container" class="personal-settings-container">
<div> <div>
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>"> <form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
<h2> <h3>
<label><?php p($l->t('Profile picture')); ?></label> <label><?php p($l->t('Profile picture')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<div id="displayavatar"> <div id="displayavatar">
<div class="avatardiv"></div> <div class="avatardiv"></div>
<div class="warning hidden"></div> <div class="warning hidden"></div>
@ -75,7 +75,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
</form> </form>
</div> </div>
<div class="personal-settings-setting-box personal-settings-group-box section"> <div class="personal-settings-setting-box personal-settings-group-box section">
<h2><?php p($l->t('Details')); ?></h2> <h3><?php p($l->t('Details')); ?></h3>
<div id="groups" class="personal-info icon-user"> <div id="groups" class="personal-info icon-user">
<p><?php p($l->t('You are a member of the following groups:')); ?></p> <p><?php p($l->t('You are a member of the following groups:')); ?></p>
<p id="groups-groups"> <p id="groups-groups">
@ -102,14 +102,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
<div class="personal-settings-container"> <div class="personal-settings-container">
<div class="personal-settings-setting-box"> <div class="personal-settings-setting-box">
<form id="displaynameform" class="section"> <form id="displaynameform" class="section">
<h2> <h3>
<label for="displayname"><?php p($l->t('Full name')); ?></label> <label for="displayname"><?php p($l->t('Full name')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<input type="text" id="displayname" name="displayname" <input type="text" id="displayname" name="displayname"
<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?> <?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
value="<?php p($_['displayName']) ?>" value="<?php p($_['displayName']) ?>"
@ -126,14 +126,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
</div> </div>
<div class="personal-settings-setting-box"> <div class="personal-settings-setting-box">
<form id="emailform" class="section"> <form id="emailform" class="section">
<h2> <h3>
<label for="email"><?php p($l->t('Email')); ?></label> <label for="email"><?php p($l->t('Email')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') p('hidden'); ?>"> <div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') p('hidden'); ?>">
<img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src=" <img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src="
<?php <?php
@ -169,14 +169,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php if (!empty($_['phone']) || $_['lookupServerUploadEnabled']) { ?> <?php if (!empty($_['phone']) || $_['lookupServerUploadEnabled']) { ?>
<div class="personal-settings-setting-box"> <div class="personal-settings-setting-box">
<form id="phoneform" class="section"> <form id="phoneform" class="section">
<h2> <h3>
<label for="phone"><?php p($l->t('Phone number')); ?></label> <label for="phone"><?php p($l->t('Phone number')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?> <input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
value="<?php p($_['phone']) ?>" value="<?php p($_['phone']) ?>"
placeholder="<?php p($l->t('Your phone number')); ?>" placeholder="<?php p($l->t('Your phone number')); ?>"
@ -191,14 +191,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php if (!empty($_['address']) || $_['lookupServerUploadEnabled']) { ?> <?php if (!empty($_['address']) || $_['lookupServerUploadEnabled']) { ?>
<div class="personal-settings-setting-box"> <div class="personal-settings-setting-box">
<form id="addressform" class="section"> <form id="addressform" class="section">
<h2> <h3>
<label for="address"><?php p($l->t('Address')); ?></label> <label for="address"><?php p($l->t('Address')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?> <input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
placeholder="<?php p($l->t('Your postal address')); ?>" placeholder="<?php p($l->t('Your postal address')); ?>"
value="<?php p($_['address']) ?>" value="<?php p($_['address']) ?>"
@ -213,14 +213,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php if (!empty($_['website']) || $_['lookupServerUploadEnabled']) { ?> <?php if (!empty($_['website']) || $_['lookupServerUploadEnabled']) { ?>
<div class="personal-settings-setting-box"> <div class="personal-settings-setting-box">
<form id="websiteform" class="section"> <form id="websiteform" class="section">
<h2> <h3>
<label for="website"><?php p($l->t('Website')); ?></label> <label for="website"><?php p($l->t('Website')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<?php if($_['lookupServerUploadEnabled']) { ?> <?php if($_['lookupServerUploadEnabled']) { ?>
<div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') p('hidden'); ?>"> <div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') p('hidden'); ?>">
<img id="verify-website" title="<?php p($_['websiteMessage']); ?>" data-status="<?php p($_['websiteVerification']) ?>" src=" <img id="verify-website" title="<?php p($_['websiteMessage']); ?>" data-status="<?php p($_['websiteVerification']) ?>" src="
@ -262,14 +262,14 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php if (!empty($_['twitter']) || $_['lookupServerUploadEnabled']) { ?> <?php if (!empty($_['twitter']) || $_['lookupServerUploadEnabled']) { ?>
<div class="personal-settings-setting-box"> <div class="personal-settings-setting-box">
<form id="twitterform" class="section"> <form id="twitterform" class="section">
<h2> <h3>
<label for="twitter"><?php p($l->t('Twitter')); ?></label> <label for="twitter"><?php p($l->t('Twitter')); ?></label>
<div class="federation-menu"> <div class="federation-menu">
<span class="icon-federation-menu icon-password"> <span class="icon-federation-menu icon-password">
<span class="icon-triangle-s"></span> <span class="icon-triangle-s"></span>
</span> </span>
</div> </div>
</h2> </h3>
<?php if($_['lookupServerUploadEnabled']) { ?> <?php if($_['lookupServerUploadEnabled']) { ?>
<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') p('hidden'); ?>"> <div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') p('hidden'); ?>">
<img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src=" <img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src="
@ -314,9 +314,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
<div class="personal-settings-setting-box personal-settings-language-box"> <div class="personal-settings-setting-box personal-settings-language-box">
<?php if (isset($_['activelanguage'])) { ?> <?php if (isset($_['activelanguage'])) { ?>
<form id="language" class="section"> <form id="language" class="section">
<h2> <h3>
<label for="languageinput"><?php p($l->t('Language'));?></label> <label for="languageinput"><?php p($l->t('Language'));?></label>
</h2> </h3>
<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>"> <select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
<option value="<?php p($_['activelanguage']['code']);?>"> <option value="<?php p($_['activelanguage']['code']);?>">
<?php p($_['activelanguage']['name']);?> <?php p($_['activelanguage']['name']);?>
@ -343,9 +343,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
<div class="personal-settings-setting-box personal-settings-locale-box"> <div class="personal-settings-setting-box personal-settings-locale-box">
<?php if (isset($_['activelocale'])) { ?> <?php if (isset($_['activelocale'])) { ?>
<form id="locale" class="section"> <form id="locale" class="section">
<h2> <h3>
<label for="localeinput"><?php p($l->t('Locale'));?></label> <label for="localeinput"><?php p($l->t('Locale'));?></label>
</h2> </h3>
<select id="localeinput" name="lang" data-placeholder="<?php p($l->t('Locale'));?>"> <select id="localeinput" name="lang" data-placeholder="<?php p($l->t('Locale'));?>">
<option value="<?php p($_['activelocale']['code']);?>"> <option value="<?php p($_['activelocale']['code']);?>">
<?php p($_['activelocale']['name']);?> <?php p($_['activelocale']['name']);?>