mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-01 15:31:16 +00:00
better responsive breakpoints, more robust custom grid
This commit is contained in:
Zachary Kain
parent
efe1c9267e
commit
1a308da495
4 changed files with 69 additions and 26 deletions
|
|
@ -8,6 +8,10 @@
|
|||
@import "./items.styl";
|
||||
@import "./alerts.styl";
|
||||
@import "./helpers.styl";
|
||||
@import "./responsive.styl";
|
||||
|
||||
// where's the actual bootstrap include?
|
||||
// @import "../bootstrap-responsive.styl";
|
||||
|
||||
@import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";
|
||||
|
||||
|
|
@ -35,7 +39,7 @@ html,body,p,h1,ul,li,table,tr,th,td
|
|||
box-sizing: border-box
|
||||
z-index: 1000
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 600px) {
|
||||
#head {
|
||||
position: static;
|
||||
}
|
||||
|
|
@ -132,7 +136,7 @@ html,body,p,h1,ul,li,table,tr,th,td
|
|||
/*overflow:auto;*/
|
||||
padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 600px) {
|
||||
#wrap {
|
||||
margin-top: 0
|
||||
}
|
||||
|
|
|
|||
28
styles/app/responsive.styl
Normal file
28
styles/app/responsive.styl
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.grid
|
||||
padding: 0 1.5em 1.5em 0
|
||||
letter-spacing: -4px
|
||||
|
||||
.module
|
||||
display: inline-block
|
||||
letter-spacing: normal
|
||||
vertical-align: top
|
||||
width: 25%
|
||||
padding: 0 0 1.5em 1.5em
|
||||
-moz-box-sizing: border-box
|
||||
box-sizing: border-box
|
||||
|
||||
// at 960px when 4 columns really starts to break
|
||||
@media (max-width: 60em)
|
||||
.module
|
||||
width: 50%
|
||||
.task-column
|
||||
max-height: 18em
|
||||
overflow-y: scroll
|
||||
|
||||
// at 600px when 2col starts breaking
|
||||
@media (max-width: 37.5em)
|
||||
.module
|
||||
width: 100%
|
||||
.task-column
|
||||
max-height: none
|
||||
overflow: visible
|
||||
|
|
@ -28,9 +28,9 @@
|
|||
<Body:>
|
||||
<br/>
|
||||
<div id="notification-area"></div>
|
||||
<div id=wrap class="container-fluid">
|
||||
<div id="wrap">
|
||||
<app:alerts:alerts />
|
||||
<div id=main class="row-fluid">
|
||||
<div id=main class="grid">
|
||||
<app:taskLists />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,27 @@
|
|||
<taskLists:>
|
||||
<!--helpTitle & helpContent moved to tour -->
|
||||
<div class="task-column span3 habits">
|
||||
<!--helpTitle & helpContent moved to tour -->
|
||||
|
||||
<!-- Habits Column -->
|
||||
<div class="module">
|
||||
<div class="task-column habits">
|
||||
<h2>Habits</h2>
|
||||
<app:newTask type="habit" inputValue="{_newHabit}" placeHolder="New Habit" />
|
||||
<ul class="habits">{#each _habitList as :task}<app:task />{/}</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-column span3 dailys">
|
||||
<!-- Dailys Column -->
|
||||
<div class="module">
|
||||
<div class="task-column dailys">
|
||||
<h2>Daily</h2>
|
||||
<app:newTask type="daily" inputValue="{_newDaily}" placeHolder="New Daily" />
|
||||
<ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-column span3 todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
|
||||
<!-- Todos Column -->
|
||||
<div class="module">
|
||||
<div class="task-column todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
|
||||
<span class='option-box pull-right'>
|
||||
{#if _user.history.todos}
|
||||
<a class="option-action" x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
|
|
@ -36,11 +45,12 @@
|
|||
<li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
|
||||
<li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-column span3 rewards">
|
||||
|
||||
<!-- Rewards Column -->
|
||||
<div class="module">
|
||||
<div class="task-column rewards">
|
||||
<!--Title -->
|
||||
<div class="row-fluid">
|
||||
<div class="span6"><h2>Rewards</h2></div>
|
||||
|
|
@ -60,68 +70,69 @@
|
|||
</div>
|
||||
</div>
|
||||
<app:newTask type="reward" inputValue="{_newReward}" placeHolder="New Reward" />
|
||||
|
||||
|
||||
{#if _user.flags.petsEnabled}
|
||||
<div class='tabbable tabs-below'>
|
||||
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rewards-tab">
|
||||
<app:rewardsTab />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tab-pane" id="pets-tab">
|
||||
{#with _view.items.pets as :pets}
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[0]}<app:pet />{/}
|
||||
{#with :pets[1]}<app:pet />{/}
|
||||
{#with :pets[2]}<app:pet />{/}
|
||||
{#with :pets[3]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[4]}<app:pet />{/}
|
||||
{#with :pets[5]}<app:pet />{/}
|
||||
{#with :pets[6]}<app:pet />{/}
|
||||
{#with :pets[7]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[8]}<app:pet />{/}
|
||||
{#with :pets[9]}<app:pet />{/}
|
||||
{#with :pets[10]}<app:pet />{/}
|
||||
{#with :pets[11]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[12]}<app:pet />{/}
|
||||
{#with :pets[13]}<app:pet />{/}
|
||||
{#with :pets[14]}<app:pet />{/}
|
||||
{#with :pets[15]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
{#with :pets[16]}<app:pet />{/}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/}
|
||||
</div>
|
||||
<!--<div class="tab-pane" id="mounts-tab">...</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="nav nav-tabs" id="rewardsTabs">
|
||||
<li class="active"><a href="#rewards-tab" data-toggle="tab" x-bind="click:activateRewardsTab">Rewards</a></li>
|
||||
<li><a href="#pets-tab" id='pets-tab' data-toggle="tab" x-bind='click:activatePetsTab'>Pets</a></li>
|
||||
<!--<li><a href="#mounts-tab" data-toggle="tab">Mounts</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
{else}
|
||||
{else}
|
||||
<app:rewardsTab />
|
||||
{/}
|
||||
</div>
|
||||
{/}</div>
|
||||
</div>
|
||||
|
||||
<!-- Templates -->
|
||||
<newTask:>
|
||||
<form class="addtask-form form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
|
||||
<input class="addtask-btn" type="submit" value="＋">
|
||||
|
|
|
|||
Loading…
Reference in a new issue