github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-21 03:59:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make stuff responsive. closes #6

Browse Source
This commit is contained in:
Toby Zerner 2015-06-24 11:48:15 +09:30
parent 1ea91dc707
commit 1acfb19800
4 changed files with 68 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
extensions/tags/js/src/components/tag-discussion-modal.js
View File

@ -1,6 +1,7 @@
import FormModal from 'flarum/components/form-modal';
import DiscussionPage from 'flarum/components/discussion-page';
import highlight from 'flarum/helpers/highlight';
import icon from 'flarum/helpers/icon';
import classList from 'flarum/utils/class-list';
import tagLabel from 'flarum-tags/helpers/tag-label';
@ -89,7 +90,9 @@ export default class TagDiscussionModal extends FormModal {
onblur: () => this.focused(false)
})
]),
m('button[type=submit].btn.btn-primary', {disabled: !selected.length}, 'Confirm')
m('span.primary-control',
m('button[type=submit].btn.btn-primary', {disabled: !selected.length}, icon('check icon'), m('span.label', 'Confirm'))
)
])
],
footer: [

2
extensions/tags/js/src/components/tag-nav-item.js
View File

@ -16,7 +16,7 @@ export default class TagNavItem extends NavItem {
}
return m('li'+(active ? '.active' : ''),
m('a', {
m('a.has-icon', {
href: this.props.href,
config: m.route,
onclick: () => {

7
extensions/tags/js/src/components/tags-page.js
View File

@ -56,9 +56,10 @@ export default class TagsPage extends Component {
]),
cloud.length ? m('div.tag-cloud', [
m('h4', 'Tags'),
m('div.tag-cloud-content', cloud.map(tag =>
m('a', {href: app.route.tag(tag), config: m.route, style: tag.color() ? 'color: '+tag.color() : ''}, tag.name())
))
m('div.tag-cloud-content', cloud.map(tag => [
m('a', {href: app.route.tag(tag), config: m.route, style: tag.color() ? 'color: '+tag.color() : ''}, tag.name()),
' '
]))
]) : ''
])
])

86
extensions/tags/less/extension.less
View File

@ -100,33 +100,43 @@
.tag-discussion-modal {
& .modal-header {
background: @fl-body-secondary-color;
padding: 20px;
padding: 20px 20px 0;
& h3 {
text-align: left;
color: @fl-body-muted-color;
font-size: 16px;
}
@media @phone {
padding: 0;
}
}
& .modal-body {
padding: 0 20px 20px;
padding: 20px;
@media @phone {
padding: 15px;
}
}
& .modal-footer {
padding: 1px 0 0;
text-align: left;
}
}
.tags-form {
padding-right: 100px;
overflow: hidden;
@media @tablet, @desktop, @desktop-hd {
.tags-form {
padding-right: 100px;
overflow: hidden;
& .tags-input {
float: left;
}
& .btn {
margin-right: -100px;
float: right;
width: 85px;
& .tags-input {
float: left;
}
& .primary-control {
margin-right: -100px;
float: right;
width: 85px;
}
}
}
.tags-input {
@ -161,6 +171,10 @@
overflow: auto;
max-height: 50vh;
@media @phone {
max-height: none;
}
& > li {
padding: 7px 20px;
overflow: hidden;
@ -189,10 +203,18 @@
width: 150px;
margin-right: 10px;
margin-left: 10px;
@media @phone {
width: auto;
}
}
& .description {
color: @fl-body-muted-color;
font-size: 12px;
@media @phone {
display: none;
}
}
&.selected {
& .tag-icon {
@ -226,25 +248,31 @@
margin: 0;
overflow: hidden;
@media @phone {
margin: -15px -15px 0;
}
& > li {
float: left;
width: ~"calc(50% - 1px)";
height: 200px;
margin-right: 1px;
margin-bottom: 1px;
overflow: hidden;
&:first-child {
border-top-left-radius: @border-radius-base;
}
&:nth-child(2) {
border-top-right-radius: @border-radius-base;
}
&:nth-last-child(2):nth-child(even), &:last-child {
border-bottom-right-radius: @border-radius-base;
}
&:nth-last-child(2):nth-child(odd), &:last-child:nth-child(odd) {
border-bottom-left-radius: @border-radius-base;
@media @tablet, @desktop, @desktop-hd {
float: left;
width: ~"calc(50% - 1px)";
margin-right: 1px;
&:first-child {
border-top-left-radius: @border-radius-base;
}
&:nth-child(2) {
border-top-right-radius: @border-radius-base;
}
&:nth-last-child(2):nth-child(even), &:last-child {
border-bottom-right-radius: @border-radius-base;
}
&:nth-last-child(2):nth-child(odd), &:last-child:nth-child(odd) {
border-bottom-left-radius: @border-radius-base;
}
}
}
}
@ -303,6 +331,9 @@
padding-top: 17px;
padding-bottom: 17px;
color: fade(#fff, 50%);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
& .title {
margin-right: 15px;
@ -310,7 +341,7 @@
}
}
.tag-cloud {
margin-top: 30px;
margin-top: 50px;
text-align: center;
& h4 {
@ -330,6 +361,7 @@
}
.tag-cloud-content {
font-size: 14px;
line-height: 1.7;
&, & a {
color: @fl-body-muted-color;