Skip to content

Commit cf72d4d

Browse files
joelebwfjoelebwf
authored
CSS Updates (#48)
CSS updates including screen size and ADA fixes.
1 parent 04494b5 commit cf72d4d

22 files changed

+197
-791
lines changed

‎web/src/App.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
-->
1414

1515
<template>
16-
<div id="app">
16+
<div id="app" role="main">
1717
<Navbar id="navbar"></Navbar>
1818
<router-view id="router-v"/>
1919
<!-- <Footer id="footer"></Footer> -->
@@ -48,10 +48,6 @@ html {
4848
grid-template-rows: 70px 0px 1000px 10px 60px;
4949
}
5050

51-
#footer {
52-
grid-row: 5 / 6;
53-
}
54-
5551
#router-v {
5652
grid-row: 3 / 4;
5753
}

‎web/src/components/ConceptDetail.vue

+47-83
Original file line numberDiff line numberDiff line change
@@ -14,46 +14,49 @@
1414

1515
<template>
1616
<div class="public-filter">
17-
<form @submit.prevent>
18-
<br/>
19-
<h1>{{ conceptName }} </h1>
20-
Label: {{ apiData.label }} <br/>
21-
Taxonomy: {{ apiData.taxonomy}} <br/>
22-
Entrypoints:<br/>
23-
<ul>
24-
<li v-for="item in apiData.entrypoints">
25-
{{ item }}
26-
</li>
27-
</ul>
28-
Description:
29-
<ul>
30-
<li>{{ apiData.description }} </li>
31-
</ul>
32-
Item Type: {{ apiData.type }}<br/>
33-
Validation Rule: {{ apiData.validationRule }} <br/>
34-
Precision/Decimals: {{ apiData.precisionDecimals }} <br/>
35-
Units:
36-
<ul>
37-
<li v-for="item in apiData.units">
38-
{{ item }}
39-
</li>
40-
</ul>
41-
Period: {{ apiData.period }} <br/>
42-
Nillable: {{ apiData.nillable }} <br/>
43-
Calculations:
44-
<ul>
45-
<li v-for="item in apiData.calculations">
46-
{{ item }}
47-
</li>
48-
</ul>
49-
Usages in Calculations:
50-
<ul>
51-
<li v-for="item in apiData.usages">
52-
{{ item }}
53-
</li>
54-
</ul>
55-
56-
</form>
17+
<div v-if="conceptName === ''">
18+
<h1>Click on a row to display details</h1>
19+
</div>
20+
<div v-else>
21+
<form @submit.prevent>
22+
<h1>{{ conceptName }} </h1>
23+
Label: {{ apiData.label }} <br/>
24+
Taxonomy: {{ apiData.taxonomy}} <br/>
25+
Entrypoints:<br/>
26+
<ul>
27+
<li v-for="item in apiData.entrypoints">
28+
{{ item }}
29+
</li>
30+
</ul>
31+
Description:
32+
<ul>
33+
<li>{{ apiData.description }} </li>
34+
</ul>
35+
Item Type: {{ apiData.type }}<br/>
36+
Validation Rule: {{ apiData.validationRule }} <br/>
37+
Precision/Decimals: {{ apiData.precisionDecimals }} <br/>
38+
Units:
39+
<ul>
40+
<li v-for="item in apiData.units">
41+
{{ item }}
42+
</li>
43+
</ul>
44+
Period: {{ apiData.period }} <br/>
45+
Nillable: {{ apiData.nillable }} <br/>
46+
Calculations:
47+
<ul>
48+
<li v-for="item in apiData.calculations">
49+
{{ item }}
50+
</li>
51+
</ul>
52+
Usages in Calculations:
53+
<ul>
54+
<li v-for="item in apiData.usages">
55+
{{ item }}
56+
</li>
57+
</ul>
58+
</form>
59+
</div>
5760
</div>
5861
</template>
5962

@@ -75,15 +78,7 @@ export default {
7578
</script>
7679

7780
<style scoped>
78-
.clear-icon {
79-
color: #db4437;
80-
margin-bottom: 3px;
81-
}
8281

83-
.search-icon {
84-
color: #4285f4;
85-
margin-bottom: 3px;
86-
}
8782
h1 {
8883
font-size: 18px;
8984
color: #4b4e52;
@@ -92,14 +87,10 @@ h1 {
9287
}
9388

9489
.public-filter {
95-
padding-left: 20px;
96-
padding-top: 5px;
97-
}
98-
99-
.form-group {
100-
font-family: "Roboto Condensed";
101-
102-
display: block;
90+
width: 600px;
91+
border: 1px solid #dadce0;
92+
overflow-wrap: break-word;
93+
padding: 5px;
10394
}
10495

10596
button {
@@ -111,38 +102,11 @@ label {
111102
display: block;
112103
}
113104

114-
.button-group {
115-
display: flex;
116-
justify-content: center;
117-
margin-bottom: 5px;
118-
margin-left: -17px;
119-
}
120-
121-
.btn-primary,
122-
.btn-primary:active,
123-
.btn-primary:visited,
124-
.btn-primary:focus,
125-
.btn-primary:disabled {
126-
background-color: white;
127-
border-color: #4b4e52;
128-
color: #4b4e52;
129-
}
130-
131-
.btn-primary:hover {
132-
background-color: #eeeeee;
133-
color: #4b4e52;
134-
border-color: #4b4e52;
135-
}
136-
137105
label {
138106
margin-top: 3px;
139107
margin-bottom: 3px;
140108
}
141109

142-
#keyword_search {
143-
width: 214px;
144-
}
145-
146110
ul.a {
147111
list-style-type: circle;
148112
}

‎web/src/components/ConceptFilter.vue

+14-12
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,33 @@
1515
<template>
1616
<div class="public-filter">
1717
<form @submit.prevent>
18-
<h1>Keyword</h1>
1918
<div class="form-group">
20-
<input
21-
type="text"
22-
class="form-control"
23-
id="keyword_search"
24-
v-model="$store.state.searchTerm"
25-
@keyup.enter="updateQuery"
26-
/>
19+
<label for="keyword_search">
20+
<h1>Keyword</h1>
21+
<input
22+
type="text"
23+
class="form-control"
24+
id="keyword_search"
25+
v-model="$store.state.searchTerm"
26+
@keyup.enter="updateQuery"
27+
/>
28+
</label>
2729
</div>
2830

2931
<h1>Concept Type</h1>
3032
<div class="form-group">
31-
<label for="data">
33+
<label for="solar">
3234
<input type="checkbox" id="solar" value="Solar" v-model="$store.state.chkSolar"/> Solar
3335
</label>
34-
<label for="documents">
36+
<label for="usgaap">
3537
<input type="checkbox" id="usgaap" value="USGaap" v-model="$store.state.chkUSGaap"/> US-Gaap
3638
</label>
37-
<label for="process">
39+
<label for="dei">
3840
<input type="checkbox" id="dei" value="DEI" v-model="$store.state.chkDEI"/> DEI
3941
</label>
4042
<label for="entryPointSelector">
4143
<h1>Select entrypoint:</h1>
42-
<b-form-select v-model="entryPointSelected" :options="$store.state.entryPointList" />
44+
<b-form-select id="entryPointSelector" v-model="entryPointSelected" :options="$store.state.entryPointList" />
4345
</label>
4446
</div>
4547
<div class="button-group">

‎web/src/components/ConceptList.vue

+4-93
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</template>
4040
</b-table>
4141
<div class="load-more-btn-container" v-if="!apiLoading">
42-
<b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
42+
<b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
4343
</div>
4444
</div>
4545
</div>
@@ -168,16 +168,13 @@ export default {
168168
</script>
169169

170170
<style>
171-
.btn {
172-
margin: 5px;
173-
}
174171
.concept-public-list-container {
175172
display: grid;
176-
grid-template-rows: 50px 720px 50px;
173+
grid-template-rows: 20px 720px 50px;
177174
grid-template-columns: auto;
178175
height: 100%;
179176
padding-top: 5px;
180-
width: 1163px;
177+
width: 900px;
181178
overflow-y: auto;
182179
}
183180

@@ -190,32 +187,6 @@ ul {
190187
list-style: none;
191188
}
192189

193-
.card {
194-
border: 2px solid #444549;
195-
box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
196-
border-radius: 4px;
197-
height: 227px;
198-
width: 488px;
199-
padding: 10px;
200-
margin-right: 10px;
201-
margin-bottom: 10px;
202-
display: grid;
203-
grid-template-columns: 33% 1fr;
204-
grid-template-rows: 140px auto;
205-
font-family: "Roboto Condensed";
206-
}
207-
208-
.logo {
209-
width: 140px;
210-
height: 140px;
211-
background-color: #d8d8d8;
212-
}
213-
214-
.card-body {
215-
padding: 0;
216-
grid-column: 2 / 3;
217-
}
218-
219190
.concept-public-list {
220191
display: flex;
221192
flex-direction: row;
@@ -226,24 +197,7 @@ ul {
226197
align-content: flex-start;
227198
grid-row: 2 / 3;
228199
grid-column: 1 /2;
229-
width: 1163px;
230-
}
231-
232-
a.nav-link {
233-
padding: 0px;
234-
}
235-
236-
.loader {
237-
border: 16px solid #f3f3f3; /* Light grey */
238-
border-top: 16px solid #3498db; /* Blue */
239-
border-radius: 50%;
240-
width: 120px;
241-
height: 120px;
242-
animation: spin 2s linear infinite;
243-
margin-left: 400px;
244-
margin-top: 150px;
245-
grid-row: 2 / 3;
246-
grid-column: 1 /2;
200+
width: 900px;
247201
}
248202

249203
@keyframes spin {
@@ -255,36 +209,6 @@ a.nav-link {
255209
}
256210
}
257211

258-
#top-buttons {
259-
grid-row: 1 / 2;
260-
margin-top: -20px;
261-
position: relative;
262-
margin-left: auto;
263-
margin-right: 0;
264-
}
265-
266-
#bottom-buttons {
267-
grid-row: 3 / 4;
268-
position: relative;
269-
margin-left: auto;
270-
margin-right: 0;
271-
}
272-
273-
.pagination {
274-
display: flex;
275-
justify-content: flex-end;
276-
}
277-
278-
.btn-primary,
279-
.btn-primary:hover,
280-
.btn-primary:active,
281-
.btn-primary:visited,
282-
.btn-primary:focus,
283-
.btn-primary:disabled {
284-
background-color: #1d4679;
285-
border-color: #1d4679;
286-
}
287-
288212
a {
289213
color: #1d4679;
290214
}
@@ -293,19 +217,6 @@ a {
293217
margin-left: 0px;
294218
}
295219

296-
.concept-code-field-col {
297-
width: 400px;
298-
text-align: center;
299-
}
300-
301-
.col-field-styling {
302-
text-align: center;
303-
}
304-
305-
.table {
306-
margin-bottom: 0px !important;
307-
}
308-
309220
.load-more-btn-container {
310221
width: 100%;
311222
display: flex;

0 commit comments

Comments
 (0)