Skip to content

Commit 02b8ec4

Browse files
JBrisJBris
committed
Adding more styling
1 parent 915e104 commit 02b8ec4

File tree

6 files changed

+140
-74
lines changed

6 files changed

+140
-74
lines changed

‎client/src/components/CollapsibleCard.vue

+19-19
Original file line numberDiff line numberDiff line change
@@ -58,24 +58,24 @@ export default {
5858
</script>
5959

6060
<style scoped lang="scss">
61-
$turquoise: hsl(171, 100%, 41%);
61+
$turquoise: hsl(171, 100%, 41%);
6262
63-
.card-header {
64-
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0);
65-
}
66-
.card-header-title{
67-
text-align: left;
68-
text-decoration: underline;
69-
font-weight: bold;
70-
}
71-
.card {
72-
margin: 0.05rem;
73-
width: 200%;
74-
box-shadow: 0.10em 0.10em 5px grey;
75-
border-radius: 1.5em;
76-
border: 0.05em solid $turquoise;
77-
}
78-
.card-content {
79-
text-align: left
80-
}
63+
.card-header {
64+
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0);
65+
}
66+
.card-header-title{
67+
text-align: left;
68+
text-decoration: underline;
69+
font-weight: bold;
70+
}
71+
.card {
72+
margin: 0.05rem;
73+
width: 200%;
74+
box-shadow: 0.10em 0.10em 5px grey;
75+
border-radius: 1.5em;
76+
border: 0.05em solid $turquoise;
77+
}
78+
.card-content {
79+
text-align: left
80+
}
8181
</style>

‎client/src/components/PaginatedList.vue

+28-17
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,30 @@
77
v-bind:key="repo.id"
88
v-bind:index="repo.id"
99
/>
10+
</div>
11+
<div class="level bottom-level">
12+
<div class="level-item is-5">
13+
<button
14+
:disabled="pageNumber === 0"
15+
class="button is-primary is-normal is-rounded pagination-button"
16+
@click="prevPage"
17+
>
18+
<p>Previous</p>
19+
</button>
1020
</div>
11-
<p>Page {{ pageNumber + 1 }}</p>
12-
<button
13-
:disabled="pageNumber === 0"
14-
class="button is-primary is-normal is-rounded pagination-button"
15-
@click="prevPage"
16-
>
17-
<p>Previous</p>
18-
</button>
19-
<button
20-
:disabled="pageNumber >= pageCount -1"
21-
class="button is-primary is-normal is-rounded pagination-button"
22-
@click="nextPage"
23-
>
24-
<p>Next</p>
25-
</button>
21+
<div class="level-item is-5">
22+
<p>Page {{ pageNumber + 1 }}</p>
23+
</div>
24+
<div class="level-item is-5">
25+
<button
26+
:disabled="pageNumber >= pageCount -1"
27+
class="button is-primary is-normal is-rounded pagination-button"
28+
@click="nextPage"
29+
>
30+
<p>Next</p>
31+
</button>
32+
</div>
33+
</div>
2634
</div>
2735
</template>
2836

@@ -73,8 +81,11 @@
7381

7482
<style scoped>
7583
.pagination-button {
76-
width: 10%;
77-
display: inline-block;
84+
width: 8em;
85+
display: inline-block;
86+
}
87+
.bottom-level {
88+
margin: 4em;
7889
}
7990
.page-link {
8091
box-shadow: none !important;

‎client/src/components/PaginationSelect.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<template>
2-
<div class="select is-primary is-normal">
2+
<div class="field">
3+
<label class="label">Results per page</label>
4+
<div class="control">
5+
<div class="select is-primary is-normal">
36
<select v-model="size" @change="changeSearchPagination($event)" >
4-
<option disabled value="">Results per page...</option>
57
<option v-for="item in items" v-bind:key="item" v-bind:value="item">
68
{{ item }}
79
</option>
810
</select>
11+
</div>
912
</div>
13+
</div>
1014
</template>
1115

1216
<script>

‎client/src/components/ProviderSelect.vue

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<template>
2-
<div class="select is-primary is-normal">
3-
<select v-model="provider" @change="changeProvider()">
4-
<option disabled value="">Select platform...</option>
5-
<option v-for="provider in providers" v-bind:key="provider.value" v-bind:value="provider.value">
6-
{{ provider.text }}
7-
</option>
8-
</select>
2+
<div class="field">
3+
<label class="label">Platform</label>
4+
<div class="control">
5+
<div class="select is-primary is-normal">
6+
<select v-model="provider" @change="changeProvider()">
7+
<option v-for="provider in providers" v-bind:key="provider.value" v-bind:value="provider.value">
8+
{{ provider.text }}
9+
</option>
10+
</select>
11+
</div>
912
</div>
13+
</div>
1014
</template>
1115

1216
<script>

‎client/src/components/SearchForm.vue

+61-22
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,53 @@
11
<template>
2-
<div>
32
<div>
4-
<input
5-
type="text"
6-
v-model="project"
7-
class="input is-normal is-primary is-rounded"
8-
placeholder="Search projects..."
9-
v-on:keyup="clearResults"
10-
>
11-
<ProviderSelect v-on:change_provider="clearResults"/>
12-
<PaginationSelect/>
13-
<div v-if="isSearching === true">
14-
Searching...
15-
<progress class="progress is-small is-primary" max="100">25%</progress>
16-
</div>
17-
<div v-if="error">{{ error }}</div>
18-
<div class="results-message">
19-
<p>{{ resultsMessage }}</p>
3+
<div class="container">
4+
<div class="columns is-centered">
5+
<div class="column is-half">
6+
<div class="field search-input is-5">
7+
<label class="label">Project</label>
8+
<div class="control">
9+
<input
10+
type="text"
11+
v-model="project"
12+
class="input is-normal is-primary is-rounded"
13+
placeholder="Search projects..."
14+
v-on:keyup="clearResults"
15+
>
16+
</div>
17+
</div>
18+
19+
<div class="level options-level">
20+
<div class="level-left">
21+
<ProviderSelect v-on:change_provider="clearResults"/>
22+
</div>
23+
<div class="level-right">
24+
<PaginationSelect/>
25+
</div>
26+
</div>
27+
28+
<div class="container has-text-centered search-result-messages">
29+
<div v-if="isSearching === true">
30+
Searching...
31+
<progress class="progress is-small is-primary search-progress-bar" max="100">25%</progress>
32+
</div>
33+
<div v-if="error">{{ error }}</div>
34+
<div class="results-message">
35+
<p>{{ resultsMessage }}</p>
36+
</div>
37+
</div>
38+
2039
</div>
21-
<PaginatedList
22-
v-if="gitRepoResults.length > 0"
23-
v-on:scroll_to_top="scrollToTop"
24-
/>
40+
</div>
2541
</div>
42+
43+
<div class="container">
44+
<PaginatedList
45+
v-if="gitRepoResults.length > 0"
46+
v-on:scroll_to_top="scrollToTop"
47+
/>
48+
</div>
49+
2650
</div>
27-
2851
</template>
2952

3053
<script>
@@ -105,3 +128,19 @@
105128
},
106129
}
107130
</script>
131+
132+
<style scoped>
133+
.search-input {
134+
margin: 0.5em;
135+
width: 50vw;
136+
}
137+
.options-level {
138+
margin: 3em;
139+
}
140+
.search-result-messages {
141+
margin: 2em;
142+
}
143+
.search-progress-bar{
144+
width: 48vw;
145+
}
146+
</style>

‎client/src/components/layout/Header.vue

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<template>
2-
<div>
3-
<header>
4-
<h2>Git Search</h2>
5-
</header>
2+
<div class="columns is-centered">
3+
<div class="column is-half">
4+
<section class="hero">
5+
<div class="hero-body">
6+
<div class="container">
7+
<h1 class="title">
8+
Git Search
9+
</h1>
10+
<p class="subtitle">
11+
Search for projects hosted on GitHub, Bitbucket, and GitHub
12+
</p>
13+
</div>
14+
</div>
15+
</section>
16+
</div>
617
</div>
718
</template>
819
<script>
920
export default {
1021
name:"Header"
1122
}
1223
</script>
13-
<style>
14-
</style>
15-

0 commit comments

Comments
 (0)