mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
Switched from a list of items to a panel.
Each panel shows a button for each bundle it is in with a checkbox. This will need to be hooked up to an onclick even in the future.
This commit is contained in:
parent
3d8d6e8ff2
commit
a7a0d554b2
204
index.html
204
index.html
@ -40,18 +40,47 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="list-group collapse" id="bundle-{{ bundle.id }}">
|
||||
<template v-for="item in static.items | filterBy bundle.id in 'bundles'">
|
||||
<a class="list-group-item">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<template v-for="bundle in item.bundles">
|
||||
<input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
|
||||
</template>
|
||||
{{ item.name }} — {{ item.source }}
|
||||
</label>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
<div class="container-fluid">
|
||||
<div class="row row-eq-height">
|
||||
<template v-for="item in static.items | filterBy bundle.id in 'bundles'">
|
||||
<div class="col-md-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{{ item.name }}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>{{ item.source }}</p>
|
||||
<div class="button-area">
|
||||
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
<span class="footer-text-area">
|
||||
<template v-for="season_id in item.seasons">
|
||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
||||
<span class="footer-text">{{ season.name }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-grain"></span>
|
||||
<div class="footer-text-area">
|
||||
<template v-for="skill_id in item.skills">
|
||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
||||
<div class="footer-text">{{ skill.name }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -63,17 +92,46 @@
|
||||
</div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="ab-list">
|
||||
<div class="list-group">
|
||||
<template v-for="item in static.items | orderBy 'name'">
|
||||
<a class="list-group-item">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
|
||||
{{ item.name }} — {{ item.source }}
|
||||
</label>
|
||||
<div class="container-fluid">
|
||||
<div class="row row-eq-height">
|
||||
<template v-for="item in static.items | orderBy 'name'">
|
||||
<div class="col-md-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{{ item.name }}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>{{ item.source }}</p>
|
||||
<div class="button-area">
|
||||
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
<span class="footer-text-area">
|
||||
<template v-for="season_id in item.seasons">
|
||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
||||
<span class="footer-text">{{ season.name }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-grain"></span>
|
||||
<div class="footer-text-area">
|
||||
<template v-for="skill_id in item.skills">
|
||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
||||
<div class="footer-text">{{ skill.name }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -88,16 +146,47 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="list-group collapse" id="season-{{ season.id }}">
|
||||
<template v-for="item in static.items | filterBy season.id in 'seasons'">
|
||||
<a class="list-group-item">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
|
||||
{{ item.name }} — {{ item.source }}
|
||||
</label>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
<div class="container-fluid">
|
||||
<div class="row row-eq-height">
|
||||
<template v-for="item in static.items | filterBy season.id in 'seasons'">
|
||||
<div class="col-md-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{{ item.name }}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>{{ item.source }}</p>
|
||||
<div class="button-area">
|
||||
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
<span class="footer-text-area">
|
||||
<template v-for="season_id in item.seasons">
|
||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
||||
<span class="footer-text">{{ season.name }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-grain"></span>
|
||||
<div class="footer-text-area">
|
||||
<template v-for="skill_id in item.skills">
|
||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
||||
<div class="footer-text">{{ skill.name }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -115,16 +204,47 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="list-group collapse" id="skill-{{ skill.id }}">
|
||||
<template v-for="item in static.items | filterBy skill.id in 'skills'">
|
||||
<a class="list-group-item">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
|
||||
{{ item.name }} — {{ item.source }}
|
||||
</label>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
<div class="container-fluid">
|
||||
<div class="row row-eq-height">
|
||||
<template v-for="item in static.items | filterBy skill.id in 'skills'">
|
||||
<div class="col-md-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">{{ item.name }}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>{{ item.source }}</p>
|
||||
<div class="button-area">
|
||||
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
<span class="footer-text-area">
|
||||
<template v-for="season_id in item.seasons">
|
||||
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
||||
<span class="footer-text">{{ season.name }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-footer-area">
|
||||
<span class="glyphicon glyphicon-grain"></span>
|
||||
<div class="footer-text-area">
|
||||
<template v-for="skill_id in item.skills">
|
||||
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
||||
<div class="footer-text">{{ skill.name }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
64
main.css
64
main.css
@ -31,3 +31,67 @@
|
||||
.list-group-item .glyphicon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.row-eq-height, .row-eq-height > div[class*='col-']{
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-content:stretch;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.panel-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.panel-body > p{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.panel-body > .button-area{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-area > .btn{
|
||||
flex: 1 0 auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.panel-footer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel-footer-area{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 auto;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.footer-text-area{
|
||||
margin-left: 1rem;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.footer-text{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user