rpdata
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

*: Added media queries to make it less awful on mobile.
the build was successful
Details

1.1
Gisle Aune 6 years ago
parent
b57873091b
commit
a8f4d68f1e
19 changed files with 93 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 11
      marko/global/base.less
  8. 12
      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
View File

@ -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
View File

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

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

@ -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
View File

@ -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
View File

@ -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
View File

@ -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;
}
} }

11
marko/global/base.less
View File

@ -16,10 +16,19 @@ 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.
*/ */
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 2px; width: 2px;
/* for vertical scrollbars */ /* for vertical scrollbars */
height: 2px; height: 2px;

12
marko/global/navbar.less
View File

@ -30,4 +30,14 @@ nav.layout-navbar {
color: white; color: white;
} }
} }
}
}
@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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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>
Write Preview
Loading…
Cancel
Save