mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-11 11:15:24 +03:00
Merge pull request #717 from pulsar-edit/about-package-responsive-design-for-narrow-width-panels
about: Make the About page's CSS responsive for narrow panes
This commit is contained in:
commit
00404d99bc
@ -83,7 +83,7 @@ module.exports = class AboutView extends EtchComponent {
|
||||
return $.div(
|
||||
{ className: 'pane-item native-key-bindings about' },
|
||||
$.div(
|
||||
{ className: 'about-container' },
|
||||
{ className: 'about-container min-width-min-content' },
|
||||
$.header(
|
||||
{ className: 'about-header' },
|
||||
$.a(
|
||||
@ -94,7 +94,7 @@ module.exports = class AboutView extends EtchComponent {
|
||||
{ className: 'about-header-info' },
|
||||
$.span(
|
||||
{
|
||||
className: 'about-version-container inline-block atom',
|
||||
className: 'about-version-container atom',
|
||||
onclick: this.handleAtomVersionClick.bind(this)
|
||||
},
|
||||
$.span(
|
||||
@ -114,7 +114,7 @@ module.exports = class AboutView extends EtchComponent {
|
||||
$.span(
|
||||
{
|
||||
className:
|
||||
'about-version-container inline-block show-more-expand',
|
||||
'about-version-container show-more-expand',
|
||||
onclick: this.handleShowMoreClick.bind(this)
|
||||
},
|
||||
$.span({ className: 'about-more-expand' }, 'Show more')
|
||||
@ -168,7 +168,7 @@ module.exports = class AboutView extends EtchComponent {
|
||||
),
|
||||
|
||||
$.div(
|
||||
{ className: 'about-updates group-start' },
|
||||
{ className: 'about-updates group-start min-width-min-content' },
|
||||
$.div(
|
||||
{ className: 'about-updates-box' },
|
||||
$.div(
|
||||
@ -177,7 +177,7 @@ module.exports = class AboutView extends EtchComponent {
|
||||
{ className: 'about-updates-item app-unsupported' },
|
||||
$.span(
|
||||
{ className: 'about-updates-label is-strong' },
|
||||
'Updates have been moved to the package ', $.code({}, 'pulsar-updater'), '.',
|
||||
'Updates have been moved to the package ', $.code({style: {'white-space': 'nowrap'}}, 'pulsar-updater'), '.',
|
||||
$.br()
|
||||
),
|
||||
$.a(
|
||||
@ -242,7 +242,8 @@ module.exports = class AboutView extends EtchComponent {
|
||||
className: 'btn about-update-action-button',
|
||||
onclick: this.executeUpdateAction.bind(this),
|
||||
style: {
|
||||
display: 'block'
|
||||
display: 'block',
|
||||
margin: '0 .5em'
|
||||
}
|
||||
},
|
||||
'Check Now'
|
||||
|
@ -33,6 +33,10 @@
|
||||
margin-top: -.2em;
|
||||
}
|
||||
|
||||
.min-width-min-content {
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
// used to group different elements
|
||||
.group-start {
|
||||
margin-top: 4em;
|
||||
@ -45,8 +49,13 @@
|
||||
.about-container {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
.icon::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Header --------------------------------
|
||||
|
||||
.about-atom-io:hover {
|
||||
@ -64,7 +73,16 @@
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.about-header-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 30px;
|
||||
}
|
||||
.about-version-container {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
color: lighten(@text-color, 15%);
|
||||
}
|
||||
@ -84,17 +102,12 @@
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.about-header-release-notes {
|
||||
vertical-align: middle;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
|
||||
// Updates --------------------------------
|
||||
|
||||
.about-updates {
|
||||
width: 100%;
|
||||
//max-width: 510px;
|
||||
max-width: 39em;
|
||||
}
|
||||
|
||||
.about-updates-box {
|
||||
@ -128,11 +141,6 @@
|
||||
margin: 0 .4em;
|
||||
}
|
||||
|
||||
.about-updates-release-notes,
|
||||
.about-updates-instructions {
|
||||
margin: 0 1em 0 1.5em;
|
||||
}
|
||||
|
||||
.about-auto-updates {
|
||||
margin-top: 1em;
|
||||
input {
|
||||
@ -144,6 +152,8 @@
|
||||
// Love --------------------------------
|
||||
|
||||
.about-love {
|
||||
min-width: max-content;
|
||||
|
||||
.icon::before {
|
||||
// Make these octicons look good inlined with text
|
||||
position: relative;
|
||||
|
Loading…
Reference in New Issue
Block a user