diff --git a/app/assets/stylesheets/app/_footer.scss b/app/assets/stylesheets/app/_footer.scss index acd0f887a..6cb0c071d 100644 --- a/app/assets/stylesheets/app/_footer.scss +++ b/app/assets/stylesheets/app/_footer.scss @@ -16,54 +16,15 @@ h2 { position: relative; width: 100%; padding: 5px; - background-color: #f1f1f1; - border-top: 1px solid rgba(black, 0.04); + background-color: #F6F6F6; + border-top: 1px solid #D3D3D3; height: $footer-height; max-height: $footer-height; z-index: 100; - font-size: 10px; - color: $dark-gray; - .medium-text { - font-size: 14px; - } - - a { - font-weight: bold; - cursor: pointer; - - &.gray { - color: $dark-gray; - } - - &.block { - display: block; - } - } - - p { - margin: 2px 0px; - font-size: 12px; - } - - label { - font-weight: bold; - margin-bottom: 4px; - } - - h1 { - font-size: 16px; - } - - h3 { - font-size: 14px; - margin-top: 4px; - margin-bottom: 3px; - } - - h4 { - margin-bottom: 4px; - font-size: 13px; + .pull-left, .pull-right { + height: 100%; + display: flex; } section { @@ -80,133 +41,57 @@ h2 { } input { - // margin-bottom: 10px; border-radius: 0px; } - - #room-bar { - display: inline-block; - border-left: 1px solid gray; - padding-left: 10px; - padding-right: 10px; - margin-left: 5px; - position: relative; - - .room-item { - display: inline-block; - position: relative; - vertical-align: middle; - - .label { - display: inline-block; - vertical-align: middle; - font-size: 11px; - margin-top: -2px; - } - - .icon { - width: 16px; - height: 16px; - display: inline-block; - vertical-align: middle; - } - - .room-container { - max-height: 85vh; - position: absolute; - right: 0px; - bottom: 20px; - min-width: 300px; - z-index: 1000; - margin-top: 15px; - - box-shadow: 0px 0px 15px rgba(black, 0.2); - border: none; - cursor: default; - overflow: auto; - background-color: white; - } - - .room-iframe { - width: 100%; - height: 100%; - } - } - } } #footer-bar .footer-bar-link { - font-size: 11px; - font-weight: bold; - margin-left: 8px; - color: #515263; + margin-left: 10px; + &:not(:first-child) { + margin-left: 12px; + } z-index: 1000; - display: inline-block; position: relative; - cursor: pointer; - + height: 100%; user-select: none; - > a { + display: flex; + align-items: center; + justify-content: center; + + > .label { + font-size: 12px; + font-weight: bold; color: #515263; + cursor: pointer; + + &:hover { + text-decoration: none; + color: $blue-color; + } } } .footer-bar-link .panel { - font-weight: normal; - font-size: 12px; - max-height: 85vh; position: absolute; right: 0px; - bottom: 20px; + left: 10px; + bottom: 40px; min-width: 300px; z-index: 1000; margin-top: 15px; - - box-shadow: 0px 0px 15px rgba(black, 0.2); - border: none; - cursor: default; - overflow: auto; background-color: white; } -button.light { - font-weight: bold; - margin-bottom: 0px; - font-size: 12px; - height: 30px; - padding-top: 3px; - text-align: center; - margin-bottom: 6px; - background-color: white; - display: block; - width: 100%; - border: 1px solid rgba(gray, 0.15); - cursor: pointer; +#account-panel { + width: 400px; - &:hover { - background-color: rgba(gray, 0.10); - } -} - -.half-button { - $spacing: 2px; - width: calc(50% - #{$spacing}); - margin-left: $spacing/2.0; - margin-right: $spacing/2.0; - float: left; -} - -.gray-bg { - background-color: #f6f6f6; - border: 1px solid #f2f2f2; -} - -.white-bg { - background-color: white; - border: 1px solid rgba(gray, 0.2); + #signout-button { + text-align: right; + display: block; + } } a.disabled { @@ -247,7 +132,55 @@ a.disabled { +#room-bar { + display: inline-block; + border-left: 1px solid rgba(black, 0.1); + padding-left: 15px; + padding-right: 10px; + margin-left: 15px; + position: relative; + .room-item { + display: inline-block; + position: relative; + vertical-align: middle; + + .label { + display: inline-block; + vertical-align: middle; + font-size: 11px; + margin-top: -2px; + } + + .icon { + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + } + + .room-container { + max-height: 85vh; + position: absolute; + right: 0px; + bottom: 20px; + min-width: 300px; + z-index: 1000; + margin-top: 15px; + + box-shadow: 0px 0px 15px rgba(black, 0.2); + border: none; + cursor: default; + overflow: auto; + background-color: white; + } + + .room-iframe { + width: 100%; + height: 100%; + } + } +} diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss index 39ab8bdb1..24a1c2366 100644 --- a/app/assets/stylesheets/app/_main.scss +++ b/app/assets/stylesheets/app/_main.scss @@ -66,7 +66,7 @@ body { -webkit-font-smoothing: antialiased; min-height: 100%; height: 100%; - font-size: 20px; + font-size: 14px; margin: 0; background-color: $bg-color; } @@ -108,7 +108,7 @@ p { background-color: $bg-color; } -$footer-height: 25px; +$footer-height: 32px; .app { height: calc(100% - #{$footer-height}); diff --git a/app/assets/stylesheets/app/_ui.scss b/app/assets/stylesheets/app/_ui.scss index bbad720ee..5d6327b73 100644 --- a/app/assets/stylesheets/app/_ui.scss +++ b/app/assets/stylesheets/app/_ui.scss @@ -81,34 +81,34 @@ $screen-md-max: ($screen-lg-min - 1) !default; button:focus {outline:0;} - -.button-group { - clear: both; - height: 36px; -} - -.ui-button { - background-color: $blue-color; - border: 0; - color: white; - font-weight: bold; - min-height: 36px; - font-size: 14px; - - &.block { - width: 100%; - } -} +// +// .button-group { +// clear: both; +// height: 36px; +// } +// +// .ui-button { +// background-color: $blue-color; +// border: 0; +// color: white; +// font-weight: bold; +// min-height: 36px; +// font-size: 14px; +// +// &.block { +// width: 100%; +// } +// } .panel { position: absolute; right: 0px; min-width: 300px; z-index: 1000; - margin-top: 10px; - box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); - border: none; - background-color: white; + // margin-top: 10px; + // box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); + // border: none; + // background-color: white; } .panel-right { diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml index 6b5311743..dac816181 100644 --- a/app/assets/templates/frontend/directives/account-menu.html.haml +++ b/app/assets/templates/frontend/directives/account-menu.html.haml @@ -1,19 +1,19 @@ -.panel.panel-default.panel-right.account-data-menu - .panel-body.large-padding - %div{"ng-if" => "!user"} - - -# Account Section - .mb-10 - +.sn-component + .panel.panel-right#account-panel + .header + %h1.title Account + %a.close-button Close + .content + .panel-section.hero{"ng-if" => "!user"} .step-one{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"} - %h3 Sign in or register to enable sync and end-to-end encryption. - .small-v-space - - .button-group.mt-5 - %button.ui-button.half-button{"ng-click" => "formData.showLogin = true"} - %span Sign In - %button.ui-button.half-button{"ng-click" => "formData.showRegister = true"} - %span Register + %h1.title Sign in or register to enable sync and end-to-end encryption. + .button-group.stretch + .button.info.featured{"ng-click" => "formData.showLogin = true"} + .label Sign In + .button.info.featured{"ng-click" => "formData.showRegister = true"} + .label Register + %p + Standard Notes is free on every platform, and comes standard with sync and encryption. .step-two{"ng-if" => "formData.showLogin || formData.showRegister"} .float-group.h20 @@ -52,122 +52,124 @@ %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}} - -# End account section - %div{"ng-if" => "user"} - %h2 {{user.email}} - %p {{server}} - %div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"} - .spinner.inline.mr-5.tinted - {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}} - %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}} - %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}} + .panel-section{"ng-if" => "user"} + %h2 {{user.email}} + %p {{server}} + %div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"} + .spinner.inline.mr-5.tinted + {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}} + %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}} + %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}} - %a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password - %section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"} - %p.bold Change Password (Beta) - %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key. - %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process. - %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account. - %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding. - %div.mt-10{"ng-if" => "!newPasswordData.status"} - %a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue - %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel - %div.mt-10{"ng-if" => "newPasswordData.showForm"} - %form - %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"} - %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"} - %button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit - %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}} + %a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password + %section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"} + %p.bold Change Password (Beta) + %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key. + %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process. + %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account. + %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding. + %div.mt-10{"ng-if" => "!newPasswordData.status"} + %a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue + %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel + %div.mt-10{"ng-if" => "newPasswordData.showForm"} + %form + %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"} + %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"} + %button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit + %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}} - %a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced - %div{"ng-if" => "showAdvanced"} - %a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard - %a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items - %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials - %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"} - %label.block - Encryption key: - .wrap.normal.mt-1.selectable {{encryptionKey()}} - %label.block.mt-5.mb-0 - Server password: - .wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}} - %label.block.mt-5.mb-0 - Authentication key: - .wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}} + %a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced + %div{"ng-if" => "showAdvanced"} + %a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard + %a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items + %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials + %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"} + %label.block + Encryption key: + .wrap.normal.mt-1.selectable {{encryptionKey()}} + %label.block.mt-5.mb-0 + Server password: + .wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}} + %label.block.mt-5.mb-0 + Authentication key: + .wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}} - %div{"ng-if" => "securityUpdateAvailable()"} - %a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available - %section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"} - %p - %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more. - %div.mt-10{"ng-if" => "!securityUpdateData.processing"} - %p.bold Enter your password to update: - %form.mt-5 - %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"} - %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update - %div.mt-5{"ng-if" => "securityUpdateData.processing"} - %p.tinted Processing... + %div{"ng-if" => "securityUpdateAvailable()"} + %a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available + %section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"} + %p + %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more. + %div.mt-10{"ng-if" => "!securityUpdateData.processing"} + %p.bold Enter your password to update: + %form.mt-5 + %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"} + %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update + %div.mt-5{"ng-if" => "securityUpdateData.processing"} + %p.tinted Processing... - .mt-25 - %h4 Encryption Status - %p - {{encryptionStatusString()}} - %div.mt-5{"ng-if" => "encryptionEnabled()"} - %i {{encryptionStatusForNotes()}} - - .mt-25 - %h4 Passcode Lock - %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"} - %p Add an app passcode to lock the app and encrypt on-device key storage. - %a.block.mt-5{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} Add Passcode - - %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"} - %p.bold Choose a passcode: - %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"} - %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} - %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode - %div{"ng-if" => "hasPasscode()"} + .panel-section + %h3.title Encryption %p - Passcode lock is enabled. - %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit. - %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode - %div{"ng-if" => "!passcodeOptionAvailable()"} - %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.) + {{encryptionStatusString()}} + %div.mt-5{"ng-if" => "encryptionEnabled()"} + %i {{encryptionStatusForNotes()}} + + .panel-section + %h3.title Passcode Lock + %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"} + .button.info{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} + .label Add Passcode + + %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"} + %p.bold Choose a passcode: + %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"} + %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} + %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode + %p Add an app passcode to lock the app and encrypt on-device key storage. + %div{"ng-if" => "hasPasscode()"} + %p + Passcode lock is enabled. + %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit. + %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode + %div{"ng-if" => "!passcodeOptionAvailable()"} + %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.) - .mt-25{"ng-if" => "!importData.loading"} - %h4 Data Archives - .mt-5{"ng-if" => "encryptedBackupsAvailable()"} - %label.normal.inline - %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"} - Encrypted - %label.normal.inline - %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"} - Decrypted + .panel-section{"ng-if" => "!importData.loading"} + %h3.title Data Backups + %div{"ng-if" => "encryptedBackupsAvailable()"} + %label.normal.inline + %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"} + Encrypted + %label.normal.inline + %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"} + Decrypted - %a.block.mt-5{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} Download Data Archive + .button-group + .button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} + .label Download Backup - %label.block.mt-5 - %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"} - .fake-link.tinted Import Data from Archive + %label.button.info + %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"} + .label Import From Backup - %div{"ng-if" => "importData.requestPassword"} - %form{"ng-submit" => "submitImportPassword()"} - %p Enter the account password associated with the import file. - %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"} - %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import + %div{"ng-if" => "importData.requestPassword"} + %form{"ng-submit" => "submitImportPassword()"} + %p Enter the account password associated with the import file. + %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"} + %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import - %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted". + %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted". - .spinner.mt-10{"ng-if" => "importData.loading"} - - %a.block.mt-25.red{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }} + .spinner.mt-10{"ng-if" => "importData.loading"} + .footer + %a#signout-button{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }} diff --git a/app/assets/templates/frontend/directives/permissions-modal.html.haml b/app/assets/templates/frontend/directives/permissions-modal.html.haml index 0ca1c7f70..e17fb7f75 100644 --- a/app/assets/templates/frontend/directives/permissions-modal.html.haml +++ b/app/assets/templates/frontend/directives/permissions-modal.html.haml @@ -1,4 +1,4 @@ -.background{"ng-click" => "dismiss()"} +.background{"ng-click" => "deny()"} .content %h3 The following extension has requested these permissions: diff --git a/app/assets/templates/frontend/footer.html.haml b/app/assets/templates/frontend/footer.html.haml index b0943a8f9..5fb62a127 100644 --- a/app/assets/templates/frontend/footer.html.haml +++ b/app/assets/templates/frontend/footer.html.haml @@ -1,15 +1,15 @@ #footer-bar .pull-left .footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"} - %a{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account + %a.label{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"} .footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"} - %a{"ng-click" => "ctrl.toggleExtensions()"} Extensions + %a.label{"ng-click" => "ctrl.toggleExtensions()"} Extensions %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"} .footer-bar-link - %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} + %a.label{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help %room-bar#room-bar @@ -21,13 +21,13 @@ .footer-bar-link{"style" => "margin-right: 5px;"} %span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"} - %span{"ng-if" => "!ctrl.isRefreshing"} + %span.label{"ng-if" => "!ctrl.isRefreshing"} Last refreshed {{ctrl.lastSyncDate | appDateTime}} %span{"ng-if" => "ctrl.isRefreshing"} .spinner{"style" => "margin-top: 2px;"} - %strong{"ng-if" => "ctrl.offline"} Offline - %a{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh + %strong.label{"ng-if" => "ctrl.offline"} Offline + %a.label{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh - %span{"ng-if" => "ctrl.hasPasscode()"} + %span.label{"ng-if" => "ctrl.hasPasscode()"} %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"} diff --git a/app/views/application/frontend.html.erb b/app/views/application/frontend.html.erb index 471176b47..217bd89e2 100644 --- a/app/views/application/frontend.html.erb +++ b/app/views/application/frontend.html.erb @@ -39,6 +39,7 @@ <%= javascript_include_tag "compiled.min.js", debug: false %> <% end %> <%= stylesheet_link_tag "app", media: "all", debug: false %> + <%= stylesheet_link_tag 'stylekit.css', media: 'all', 'data-turbolinks-track' => true %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index bd097f99c..4a7e35fa7 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -13,7 +13,7 @@ Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/ # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. # Rails.application.config.assets.precompile += %w( search.js ) -Rails.application.config.assets.precompile += %w( app.css compiled.min.js compiled.js ) +Rails.application.config.assets.precompile += %w( stylekit.css app.css compiled.min.js compiled.js ) # zip library Rails.application.config.assets.precompile += %w( zip/zip.js zip/z-worker.js zip/inflate.js zip/deflate.js ) diff --git a/vendor/assets/stylesheets/stylekit.css b/vendor/assets/stylesheets/stylekit.css new file mode 100644 index 000000000..8ed3df59f --- /dev/null +++ b/vendor/assets/stylesheets/stylekit.css @@ -0,0 +1,201 @@ +.sn-component { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + user-select: none; +} +.sn-component .panel { + box-shadow: 0px 2px 13px #C8C8C8; + border-radius: 0.7rem; + overflow: hidden; +} +.sn-component .panel .header { + display: flex; + justify-content: space-between; + padding: 1.1rem 1.8rem; + border-bottom: 1px solid #E1E1E1; + background-color: #F6F6F6; + align-items: center; +} +.sn-component .panel .header .close-button { + font-weight: bold; +} +.sn-component .panel .footer { + padding: 1rem 1.8rem; + border-top: 1px solid #F1F1F1; +} +.sn-component .panel .content { + padding: 1.4rem 1.8rem; + padding-bottom: 0; +} +.sn-component .panel .content p { + color: #454545; + line-height: 1.3; +} +.sn-component .panel .content .label, .sn-component .panel .content .panel-section .subtitle { + font-weight: bold; +} +.sn-component .panel .content .panel-section { + padding-bottom: 1.4rem; +} +.sn-component .panel .content .panel-section.hero { + text-align: center; +} +.sn-component .panel .content .panel-section.hero .title { + margin-bottom: 1.1rem; +} +.sn-component .panel .content .panel-section p:last-child { + margin-bottom: 0; +} +.sn-component .panel .content .panel-section:not(:last-child) { + margin-bottom: 1.5rem; + border-bottom: 1px solid #DDDDDD; +} +.sn-component .panel .content .panel-section:last-child { + margin-bottom: 0.5rem; +} +.sn-component .panel .content .panel-section .outer-title { + border-bottom: 1px solid #DDDDDD; + padding-bottom: 0.9rem; + margin-top: 2.1rem; + margin-bottom: 15px; +} +.sn-component .panel .content .panel-section .title { + margin-bottom: 12px; +} +.sn-component .panel .content .panel-section .subtitle { + color: #086DD6; + margin-top: -4px; +} +.sn-component .red { + color: #F80324; +} +.sn-component .tinted { + color: #086DD6; +} +.sn-component h1, .sn-component h2, .sn-component h3, .sn-component h4 { + margin: 0; + padding: 0; +} +.sn-component h1 { + font-weight: 500; + font-size: 1.3rem; +} +.sn-component h2 { + font-size: 1.2rem; +} +.sn-component h3 { + font-weight: normal; + font-size: 1.2rem; +} +.sn-component h4 { + font-weight: bold; + font-size: 0.85rem; +} +.sn-component a { + color: #086DD6; + cursor: pointer; +} +.sn-component p { + margin: 0.5rem 0; +} +.sn-component .button-group.stretch { + display: flex; +} +.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box { + display: block; + flex-grow: 1; + text-align: center; +} +.sn-component .button-group .button, .sn-component .button-group .box { + display: inline-block; + margin-bottom: 5px; +} +.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child) { + margin-right: 5px; +} +.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured { + margin-right: 8px; +} +.sn-component .box-group .box { + display: inline-block; + margin-bottom: 5px; +} +.sn-component .box-group .box:not(:last-child) { + margin-right: 5px; +} +.sn-component .button, .sn-component .box { + display: table; + border-radius: 3px; + padding: 0.5rem 0.7rem; + font-size: 0.9rem; + cursor: pointer; + text-align: center; + border: 1px solid; +} +.sn-component .button .label, .sn-component .box .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle { + font-weight: bold; + display: block; + text-align: center; +} +.sn-component .box { + padding: 2.5rem 1.5rem; +} +.sn-component .info { + background-color: rgba(8, 109, 214, 0.1); + border-color: #086DD6; + color: #086DD6; +} +.sn-component .info:hover { + background-color: #d5e9fd; + color: #0975e5; +} +.sn-component .info.featured { + background-color: #086DD6; + border: none; + color: white; + padding: 0.75rem 0; + font-size: 1.1rem; +} +.sn-component .info.featured:hover { + background-color: #1181f6; +} +.sn-component .warning { + background-color: rgba(214, 173, 8, 0.1); + border-color: #D6AD08; + color: #D6AD08; +} +.sn-component .warning:hover { + background-color: #fdf5d5; + color: #e5b909; +} +.sn-component .warning.featured { + background-color: #D6AD08; + border: none; + color: white; + padding: 0.75rem 0; + font-size: 1.1rem; +} +.sn-component .warning.featured:hover { + background-color: #f6c811; +} +.sn-component .danger { + background-color: rgba(248, 3, 36, 0.1); + border-color: #F80324; + color: #F80324; +} +.sn-component .danger:hover { + background-color: #fff1f3; + color: #fc0e2e; +} +.sn-component .danger.featured { + background-color: #F80324; + border: none; + color: white; + padding: 0.75rem 0; + font-size: 1.1rem; +} +.sn-component .danger.featured:hover { + background-color: #fc2744; +} + +/*# sourceMappingURL=stylekit.css.map */