Browse Source

*: Added media queries to make it less awful on mobile.

1.1
Gisle Aune 6 years ago
parent
commit
a8f4d68f1e
  1. 5
      marko/components/content-list-item/style.less
  2. 2
      marko/components/menu-gap/index.marko
  3. 2
      marko/components/menu-link/component.js
  4. 5
      marko/components/menu/component.js
  5. 4
      marko/components/menu/index.marko
  6. 24
      marko/components/menu/style.less
  7. 9
      marko/global/base.less
  8. 10
      marko/global/navbar.less
  9. 2
      marko/page/data/components/data-menu/index.marko
  10. 7
      marko/page/layout.marko
  11. 2
      marko/page/logs-content/components/post/style.less
  12. 1
      marko/page/logs/components/logs-menu/index.marko
  13. 2
      marko/page/logs/components/logs-table-row/component.js
  14. 2
      marko/page/logs/components/logs-table-row/index.marko
  15. 6
      marko/page/logs/components/logs-table-row/style.less
  16. 2
      marko/page/logs/components/logs-table/index.marko
  17. 14
      marko/page/logs/components/logs-table/style.less
  18. 2
      marko/page/story-content/components/chapter/style.less
  19. 1
      marko/page/story/components/story-menu/index.marko

5
marko/components/content-list-item/style.less

@ -7,6 +7,11 @@ tr.content-list-item {
text-align: center; text-align: center;
width: 2.5ch; width: 2.5ch;
outline: 0.05px solid; outline: 0.05px solid;
@media screen and (max-width: 700px) {
width: 1.25ch;
font-size: 1.5em;
}
} }
> td.content { > td.content {

2
marko/components/menu-gap/index.marko

@ -1 +1 @@
<div class="menu-gap"></div>
<div class=["menu-gap", input.class]></div>

2
marko/components/menu-link/component.js

@ -6,7 +6,7 @@ module.exports = class {
} }
onInput(input) { onInput(input) {
this.state.classes = ["menu-link", "color-menu"]
this.state.classes = ["menu-link", "color-menu"].concat(input.class)
if (input.dark) { if (input.dark) {
this.state.classes.push(input) this.state.classes.push(input)

5
marko/components/menu/component.js

@ -3,9 +3,14 @@ module.exports = class {
this.state = { this.state = {
loggingIn: false, loggingIn: false,
loggingOut: false, loggingOut: false,
enabled: false,
} }
} }
toggleEnabled() {
this.state.enabled = !this.state.enabled
}
loginClicked() { loginClicked() {
this.state.loggingIn = true this.state.loggingIn = true
} }

4
marko/components/menu/index.marko

@ -1,5 +1,7 @@
<div class="menu">
<div class=["menu", state.enabled ? "enabled" : "disabled"]>
<div class="menu-body"> <div class="menu-body">
<menu-link icon=(state.enabled ? "<" : ">") on-click("toggleEnabled") class="showhide">${state.enabled ? "Hide Menu" : "Show Menu"}</menu-link>
<menu-gap class="showhide" />
<include(input.renderBody) /> <include(input.renderBody) />
</div> </div>
<if(input.user != null)> <if(input.user != null)>

24
marko/components/menu/style.less

@ -12,4 +12,28 @@
user-select: none; user-select: none;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
.showhide {
display: none;
}
}
@media screen and (max-width: 700px) {
.menu.disabled {
.menu-link, .menu-header, .menu-blurb, .menu-gap {
display: none;
}
}
.showhide {
display: block !important;
}
.menu {
position: static;
width: 100%;
box-sizing: border-box;
margin-left: -0.25ch;
font-size: 1.25em;
}
} }

9
marko/global/base.less

@ -16,6 +16,15 @@ body {
} }
} }
@media screen and (max-width: 700px) {
body {
main {
margin-left: 0.25ch;
width: 100%;
}
}
}
/* /*
* Less glaring chrome/ium scrollbars. * Less glaring chrome/ium scrollbars.
*/ */

10
marko/global/navbar.less

@ -31,3 +31,13 @@ nav.layout-navbar {
} }
} }
} }
@media screen and (max-width: 700px) {
nav.layout-navbar {
position: static;
margin-left: 0;
width: 100%;
font-size: 1.25em;
}
}

2
marko/page/data/components/data-menu/index.marko

@ -2,8 +2,8 @@
<menu-header>List</menu-header> <menu-header>List</menu-header>
<menu-link key="characters" selected=input.selected.characters icon="C" href="/data/characters/">Characters</menu-link> <menu-link key="characters" selected=input.selected.characters icon="C" href="/data/characters/">Characters</menu-link>
<menu-link key="channels" selected=input.selected.channels icon="#" href="/data/channels/">Channels</menu-link> <menu-link key="channels" selected=input.selected.channels icon="#" href="/data/channels/">Channels</menu-link>
<menu-gap />
<if-permitted user=input.user permission=["member", "character.add", "channel.add"]> <if-permitted user=input.user permission=["member", "character.add", "channel.add"]>
<menu-gap />
<menu-header>Add</menu-header> <menu-header>Add</menu-header>
<if-permitted user=input.user permission=["character.add", "member"]> <if-permitted user=input.user permission=["character.add", "member"]>
<menu-link dark key="characters_add" icon="+" on-click("emit", "open", "character.add")>Character</menu-link> <menu-link dark key="characters_add" icon="+" on-click("emit", "open", "character.add")>Character</menu-link>

7
marko/page/layout.marko

@ -4,6 +4,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<head>
<meta content="AiteStory is a timeline of aiterp IC content that doesn't fit the wiki format" name="description" />
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport" />
<meta content="#111111" name="theme-color" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<title>${input.title ? `${input.title} - Aite RP` : "Aite RP"}</title> <title>${input.title ? `${input.title} - Aite RP` : "Aite RP"}</title>
<lasso-head/> <lasso-head/>
</head> </head>

2
marko/page/logs-content/components/post/style.less

@ -9,7 +9,7 @@ div.post {
div.options { div.options {
position: absolute; position: absolute;
text-align: right; text-align: right;
width: calc(100% - 35.5ch);
width: calc(100% - 38.75ch);
max-width: 95ch; max-width: 95ch;
a { a {

1
marko/page/logs/components/logs-menu/index.marko

@ -8,5 +8,4 @@
<menu-header key="filters">Filters</menu-header> <menu-header key="filters">Filters</menu-header>
<menu-link for(filter in state.filters) textClass=filter.color unselectable icon=filter.icon on-click("emit", "removefilter", filter.type, filter.id)>${filter.text}</menu-link> <menu-link for(filter in state.filters) textClass=filter.color unselectable icon=filter.icon on-click("emit", "removefilter", filter.type, filter.id)>${filter.text}</menu-link>
<menu-link key="add_filter" dark on-click("select", "filter.add") icon="+">Add Filter</menu-link> <menu-link key="add_filter" dark on-click("select", "filter.add") icon="+">Add Filter</menu-link>
<menu-gap />
</menu> </menu>

2
marko/page/logs/components/logs-table-row/component.js

@ -4,7 +4,7 @@ module.exports = class {
onCreate(input) { onCreate(input) {
this.state = { this.state = {
expand: false, expand: false,
dateStr: moment(input.log.date).format("MMM D, YYYY"),
dateStr: moment(input.log.date).format("MMM D, YYYY"),
} }
} }
} }

2
marko/page/logs/components/logs-table-row/index.marko

@ -8,7 +8,7 @@ $ const fullNames = (input.log.characters.length < 4);
<a on-click("emit", "addfilter", "channels", input.log.channelName)>${input.log.channelName}</a> <a on-click("emit", "addfilter", "channels", input.log.channelName)>${input.log.channelName}</a>
</td> </td>
<td class="event color-tag-event"> <td class="event color-tag-event">
<a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "").replace(/\s/g, " ")}</a>
<a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "")}</a>
</td> </td>
<td class="characters color-menu"> <td class="characters color-menu">
<span for(character in input.log.characters | status-var=loop)> <span for(character in input.log.characters | status-var=loop)>

6
marko/page/logs/components/logs-table-row/style.less

@ -16,4 +16,10 @@ tr.logs-table-row {
td.channel, td.date, td.event { td.channel, td.date, td.event {
width: 12%; width: 12%;
} }
td.character {
a.name {
white-space: nowrap;
}
}
} }

2
marko/page/logs/components/logs-table/index.marko

@ -4,7 +4,7 @@ import moment from "moment"
<tr key="_header"> <tr key="_header">
<th>Date</th> <th>Date</th>
<th>Channel</th> <th>Channel</th>
<th>Event</th>
<th class="event">Event</th>
<th>Characters</th> <th>Characters</th>
</tr> </tr>
<logs-table-row for(log in input.logs) key=log.shortId log=log on-addfilter("emit", "addfilter") /> <logs-table-row for(log in input.logs) key=log.shortId log=log on-addfilter("emit", "addfilter") />

14
marko/page/logs/components/logs-table/style.less

@ -8,4 +8,18 @@ table.logs-table {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
@media screen and (max-width: 900px) {
td.event, th.event {
display: none;
}
}
@media screen and (max-width: 700px) {
td.date {
white-space: normal !important;
}
font-size: 0.66em;
}
} }

2
marko/page/story-content/components/chapter/style.less

@ -22,7 +22,7 @@
.options { .options {
position: absolute; position: absolute;
text-align: right; text-align: right;
width: calc(100% - 35.5ch);
width: calc(100% - 38.75ch);
max-width: 95ch; max-width: 95ch;
pointer-events: none; pointer-events: none;

1
marko/page/story/components/story-menu/index.marko

@ -18,5 +18,4 @@
<menu-gap /> <menu-gap />
<menu-header>Categories</menu-header> <menu-header>Categories</menu-header>
<menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=("/story/by-category/"+category.name) icon=category.name.charAt(0)>${category.name}</menu-link> <menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=("/story/by-category/"+category.name) icon=category.name.charAt(0)>${category.name}</menu-link>
<menu-gap />
</menu> </menu>
Loading…
Cancel
Save