Skip to content

Commit d17f27b

Browse files
tejashshresthatejashshrestha
committed
Optimising CSS by using SCSS
1) Added scss preprocessor 2) Made a seperate folder for all css 2) Seperation of css wrt type of css
1 parent f090290 commit d17f27b

File tree

13 files changed

+1037
-343
lines changed

13 files changed

+1037
-343
lines changed

‎package-lock.json‎

Lines changed: 818 additions & 179 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"dependencies": {
1111
"axios": "^0.18.0",
1212
"bootstrap-vue": "^2.0.0-rc.11",
13+
"node-sass": "^4.14.1",
14+
"sass-loader": "^7.3.1",
1315
"vue": "^2.5.17",
1416
"vue-router": "^3.0.1",
1517
"vue-star-rating": "^1.6.1",

‎src/App.vue‎

Lines changed: 2 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -8,49 +8,6 @@
88
</div>
99
</template>
1010

11-
<style>
12-
#app {
13-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
14-
-webkit-font-smoothing: antialiased;
15-
-moz-osx-font-smoothing: grayscale;
16-
17-
}
18-
19-
*{
20-
padding: 0;
21-
margin: 0;
22-
box-sizing: border-box;
23-
}
24-
25-
.pad-15-hor{
26-
padding-left:15px;
27-
padding-right:15px;
28-
}
29-
30-
.pad-15-ver{
31-
padding-top:15px;
32-
padding-bottom: 15px;
33-
}
34-
35-
.green{
36-
color: green;
37-
}
38-
39-
@media screen and (max-width:550px) {
40-
41-
.min-width-160{
42-
min-width: 160px;
43-
}
44-
45-
.max-width-160{
46-
max-width:160px;
47-
overflow: hidden;
48-
text-overflow: ellipsis;
49-
word-break: break-all;
50-
text-align:right;
51-
}
52-
53-
}
54-
55-
11+
<style lang="scss">
12+
@import "./styles/style.scss";
5613
</style>

‎src/components/Header.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div class="pad-15-hor pad-15-ver header">
3-
<div> <img src="@/assets/logo.png" width="25px"> Responsive Search </div>
3+
<div class="header-title">
4+
<img src="@/assets/logo.png" width="25px">
5+
Responsive Search
6+
</div>
47
<div> <i class="fas fa-bars"></i> </div>
58
</div>
69
</template>
@@ -13,9 +16,10 @@ export default {
1316
}
1417
</script>
1518

19+
<style scoped lang="scss">
20+
@import "../styles/header.scss";
21+
</style>
1622

17-
<style>
1823

19-
</style>
2024

2125

‎src/components/Main.vue‎

Lines changed: 25 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
<template>
22
<div>
33
<Header/>
4-
<div class="pad-15-hor pad-15-ver search-parent">
5-
<div class="search-bar">
6-
<b-form-input
7-
@input="search_text()"
8-
v-model="search.text"
9-
type="text"
10-
placeholder="Search by Name"
11-
></b-form-input>
12-
<span class="search-icon">
13-
<i class="fas fa-search"></i>
14-
</span>
15-
</div>
16-
<div>
17-
<span class="bold">Total Likes:</span>
18-
{{likes.count}}
19-
<span class="bold">Hits:</span>
20-
{{likes.hit}}
21-
</div>
22-
<div>
23-
<b-form-select @input="sort()" v-model="search.filter" :options="options"/>
4+
<div class="search">
5+
<div class="pad-15-hor pad-15-ver search-parent">
6+
<div class="search-bar" >
7+
<b-form-input
8+
@input="search_text()"
9+
v-model="search.text"
10+
type="text"
11+
placeholder="Search by Name"
12+
></b-form-input>
13+
<span class="search-icon">
14+
<i class="fas fa-search"></i>
15+
</span>
16+
</div>
17+
<div>
18+
<span class="bold">Total Likes:</span>
19+
{{likes.count}}
20+
<span class="bold">Hits:</span>
21+
{{likes.hit}}
22+
</div>
23+
<div>
24+
<b-form-select @input="sort()" v-model="search.filter" :options="options"/>
25+
</div>
2426
</div>
2527
</div>
2628

2729
<div class="container-fluid">
2830
<div class="row">
29-
<div class="col-md-6 pad-15-ver" v-for="wonder in wonders_data" :key="wonder.id">
31+
<div class="col-md-6 pad-15-ver card" v-for="wonder in wonders_data" :key="wonder.id">
3032
<div
3133
class="card-inner"
3234
@mouseover="show_hover(true,wonder.id)"
@@ -180,101 +182,8 @@ export default {
180182

181183

182184

183-
<style scoped>
184-
.header {
185-
display: flex;
186-
flex-flow: row wrap;
187-
justify-content: space-between;
188-
}
189-
190-
.search-parent {
191-
display: flex;
192-
flex-flow: row wrap;
193-
justify-content: space-between;
194-
background-color: lightgray;
195-
}
196-
197-
.card-inner {
198-
position: relative;
199-
overflow: hidden;
200-
box-shadow: 2px 2px 8px grey;
201-
}
202-
203-
.card-img {
204-
width: 100%;
205-
}
206-
207-
.card-bottom {
208-
position: absolute;
209-
bottom: 0;
210-
left: 0;
211-
height: 30px;
212-
width: 100%;
213-
background-color: white;
214-
opacity: 0.7;
215-
display: flex;
216-
justify-content: space-between;
217-
}
218-
219-
.card-hover {
220-
position: absolute;
221-
right: 15px;
222-
left: 15px;
223-
top: 15px;
224-
bottom: 15px;
225-
background-color: white;
226-
opacity: 0.7;
227-
display: flex;
228-
flex-flow: column wrap;
229-
justify-content: center;
230-
align-items: center;
231-
}
232-
.absolute-star {
233-
position: absolute;
234-
top: 10px;
235-
right: 10px;
236-
}
237-
238-
.card-hover p {
239-
font-size: 10px;
240-
text-align: center;
241-
}
242-
243-
.bold {
244-
font-weight: 500;
245-
}
246-
247-
.rating-div {
248-
width: 200px;
249-
}
250-
251-
.search-bar {
252-
position: relative;
253-
}
254-
.search-bar input {
255-
padding-left: 30px;
256-
}
257-
258-
.search-icon {
259-
position: absolute;
260-
top: 8px;
261-
left: 8px;
262-
}
263-
264-
@media screen and (max-width: 550px) {
265-
.search-parent {
266-
display: flex;
267-
flex-flow: column wrap;
268-
justify-content: center;
269-
align-items: center;
270-
background-color: lightgray;
271-
}
272-
273-
.search-parent div {
274-
width: 100%;
275-
text-align: center;
276-
}
277-
}
185+
<style scoped lang="scss">
186+
@import "../styles/main.scss";
278187
</style>
279188

280189

‎src/styles/_base.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// base configuration of the project
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
#app {
9+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
10+
-webkit-font-smoothing: antialiased;
11+
-moz-osx-font-smoothing: grayscale;
12+
13+
}

‎src/styles/_buttons.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// any scss for button goes here

‎src/styles/_layout.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// layout scss goes here
2+
@import 'variables';
3+
4+
.pad-15-hor {
5+
padding: 0px 15px;
6+
}
7+
8+
.pad-15-ver {
9+
padding: 15px 0px;
10+
}
11+
12+
.green {
13+
color: $color-green;
14+
}
15+
16+
.max-width-160 {
17+
max-width: 160px;
18+
overflow: hidden;
19+
text-overflow: ellipsis;
20+
word-break: break-all;
21+
text-align: right;
22+
}

‎src/styles/_responsive.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// all media queries goes here
2+
// dont forget to import this whereever applicable.
3+
4+
// Main Component
5+
@media screen and (max-width:550px) {
6+
.min-width-160 {
7+
min-width: 160px;
8+
}
9+
10+
.search {
11+
&-parent {
12+
display: flex;
13+
flex-flow: column wrap;
14+
justify-content: center;
15+
align-items: center;
16+
background-color: lightgray;
17+
18+
div {
19+
width: 100%;
20+
text-align: center;
21+
}
22+
}
23+
}
24+
}

‎src/styles/_variables.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// variable declerations
2+
$color-green: green;
3+
$color-white: white;
4+
$color-lightgray: lightgrey;
5+
6+
7+
//box-shadows
8+
$box-shadow-grey: grey;
9+
10+
//font weight
11+
$bold500 : 500;
12+
$bold700: 700;

0 commit comments

Comments
 (0)