Skip to content

Commit

Permalink
CSS Updates (#48)
Browse files Browse the repository at this point in the history 
CSS updates including screen size and ADA fixes.
  • Loading branch information
@joelebwf
joelebwf authored Feb 19, 2020
1 parent 04494b5 commit cf72d4d
Show file tree
Hide file tree
Showing 22 changed files with 197 additions and 791 deletions.
6 changes: 1 addition & 5 deletions web/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
-->

<template>
<div id="app">
<div id="app" role="main">
<Navbar id="navbar"></Navbar>
<router-view id="router-v"/>
<!-- <Footer id="footer"></Footer> -->
Expand Down Expand Up @@ -48,10 +48,6 @@ html {
grid-template-rows: 70px 0px 1000px 10px 60px;
}
#footer {
grid-row: 5 / 6;
}
#router-v {
grid-row: 3 / 4;
}
Expand Down
130 changes: 47 additions & 83 deletions web/src/components/ConceptDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,46 +14,49 @@

<template>
<div class="public-filter">
<form @submit.prevent>
<br/>
<h1>{{ conceptName }} </h1>
Label: {{ apiData.label }} <br/>
Taxonomy: {{ apiData.taxonomy}} <br/>
Entrypoints:<br/>
<ul>
<li v-for="item in apiData.entrypoints">
{{ item }}
</li>
</ul>
Description:
<ul>
<li>{{ apiData.description }} </li>
</ul>
Item Type: {{ apiData.type }}<br/>
Validation Rule: {{ apiData.validationRule }} <br/>
Precision/Decimals: {{ apiData.precisionDecimals }} <br/>
Units:
<ul>
<li v-for="item in apiData.units">
{{ item }}
</li>
</ul>
Period: {{ apiData.period }} <br/>
Nillable: {{ apiData.nillable }} <br/>
Calculations:
<ul>
<li v-for="item in apiData.calculations">
{{ item }}
</li>
</ul>
Usages in Calculations:
<ul>
<li v-for="item in apiData.usages">
{{ item }}
</li>
</ul>

</form>
<div v-if="conceptName === ''">
<h1>Click on a row to display details</h1>
</div>
<div v-else>
<form @submit.prevent>
<h1>{{ conceptName }} </h1>
Label: {{ apiData.label }} <br/>
Taxonomy: {{ apiData.taxonomy}} <br/>
Entrypoints:<br/>
<ul>
<li v-for="item in apiData.entrypoints">
{{ item }}
</li>
</ul>
Description:
<ul>
<li>{{ apiData.description }} </li>
</ul>
Item Type: {{ apiData.type }}<br/>
Validation Rule: {{ apiData.validationRule }} <br/>
Precision/Decimals: {{ apiData.precisionDecimals }} <br/>
Units:
<ul>
<li v-for="item in apiData.units">
{{ item }}
</li>
</ul>
Period: {{ apiData.period }} <br/>
Nillable: {{ apiData.nillable }} <br/>
Calculations:
<ul>
<li v-for="item in apiData.calculations">
{{ item }}
</li>
</ul>
Usages in Calculations:
<ul>
<li v-for="item in apiData.usages">
{{ item }}
</li>
</ul>
</form>
</div>
</div>
</template>

Expand All @@ -75,15 +78,7 @@ export default {
</script>

<style scoped>
.clear-icon {
color: #db4437;
margin-bottom: 3px;
}
.search-icon {
color: #4285f4;
margin-bottom: 3px;
}
h1 {
font-size: 18px;
color: #4b4e52;
Expand All @@ -92,14 +87,10 @@ h1 {
}
.public-filter {
padding-left: 20px;
padding-top: 5px;
}
.form-group {
font-family: "Roboto Condensed";
display: block;
width: 600px;
border: 1px solid #dadce0;
overflow-wrap: break-word;
padding: 5px;
}
button {
Expand All @@ -111,38 +102,11 @@ label {
display: block;
}
.button-group {
display: flex;
justify-content: center;
margin-bottom: 5px;
margin-left: -17px;
}
.btn-primary,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:disabled {
background-color: white;
border-color: #4b4e52;
color: #4b4e52;
}
.btn-primary:hover {
background-color: #eeeeee;
color: #4b4e52;
border-color: #4b4e52;
}
label {
margin-top: 3px;
margin-bottom: 3px;
}
#keyword_search {
width: 214px;
}
ul.a {
list-style-type: circle;
}
Expand Down
26 changes: 14 additions & 12 deletions web/src/components/ConceptFilter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,33 @@
<template>
<div class="public-filter">
<form @submit.prevent>
<h1>Keyword</h1>
<div class="form-group">
<input
type="text"
class="form-control"
id="keyword_search"
v-model="$store.state.searchTerm"
@keyup.enter="updateQuery"
/>
<label for="keyword_search">
<h1>Keyword</h1>
<input
type="text"
class="form-control"
id="keyword_search"
v-model="$store.state.searchTerm"
@keyup.enter="updateQuery"
/>
</label>
</div>

<h1>Concept Type</h1>
<div class="form-group">
<label for="data">
<label for="solar">
<input type="checkbox" id="solar" value="Solar" v-model="$store.state.chkSolar"/> Solar
</label>
<label for="documents">
<label for="usgaap">
<input type="checkbox" id="usgaap" value="USGaap" v-model="$store.state.chkUSGaap"/> US-Gaap
</label>
<label for="process">
<label for="dei">
<input type="checkbox" id="dei" value="DEI" v-model="$store.state.chkDEI"/> DEI
</label>
<label for="entryPointSelector">
<h1>Select entrypoint:</h1>
<b-form-select v-model="entryPointSelected" :options="$store.state.entryPointList" />
<b-form-select id="entryPointSelector" v-model="entryPointSelected" :options="$store.state.entryPointList" />
</label>
</div>
<div class="button-group">
Expand Down
97 changes: 4 additions & 93 deletions web/src/components/ConceptList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</template>
</b-table>
<div class="load-more-btn-container" v-if="!apiLoading">
<b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
<b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
</div>
</div>
</div>
Expand Down Expand Up @@ -168,16 +168,13 @@ export default {
</script>

<style>
.btn {
margin: 5px;
}
.concept-public-list-container {
display: grid;
grid-template-rows: 50px 720px 50px;
grid-template-rows: 20px 720px 50px;
grid-template-columns: auto;
height: 100%;
padding-top: 5px;
width: 1163px;
width: 900px;
overflow-y: auto;
}
Expand All @@ -190,32 +187,6 @@ ul {
list-style: none;
}
.card {
border: 2px solid #444549;
box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 227px;
width: 488px;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
display: grid;
grid-template-columns: 33% 1fr;
grid-template-rows: 140px auto;
font-family: "Roboto Condensed";
}
.logo {
width: 140px;
height: 140px;
background-color: #d8d8d8;
}
.card-body {
padding: 0;
grid-column: 2 / 3;
}
.concept-public-list {
display: flex;
flex-direction: row;
Expand All @@ -226,24 +197,7 @@ ul {
align-content: flex-start;
grid-row: 2 / 3;
grid-column: 1 /2;
width: 1163px;
}
a.nav-link {
padding: 0px;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin-left: 400px;
margin-top: 150px;
grid-row: 2 / 3;
grid-column: 1 /2;
width: 900px;
}
@keyframes spin {
Expand All @@ -255,36 +209,6 @@ a.nav-link {
}
}
#top-buttons {
grid-row: 1 / 2;
margin-top: -20px;
position: relative;
margin-left: auto;
margin-right: 0;
}
#bottom-buttons {
grid-row: 3 / 4;
position: relative;
margin-left: auto;
margin-right: 0;
}
.pagination {
display: flex;
justify-content: flex-end;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:disabled {
background-color: #1d4679;
border-color: #1d4679;
}
a {
color: #1d4679;
}
Expand All @@ -293,19 +217,6 @@ a {
margin-left: 0px;
}
.concept-code-field-col {
width: 400px;
text-align: center;
}
.col-field-styling {
text-align: center;
}
.table {
margin-bottom: 0px !important;
}
.load-more-btn-container {
width: 100%;
display: flex;
Expand Down
Loading

0 comments on commit cf72d4d

Please sign in to comment.