From 98851dd3b583381a354d3460b8e4db422d93bf49 Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 15:54:07 +0700 Subject: [PATCH 1/7] fix style border-radius of search icon --- src/style/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/index.css b/src/style/index.css index f93bad8..093c4af 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -195,6 +195,7 @@ body { pointer-events: none; background-color: #efefef; transition: opacity 0.3s; + border-radius: 0 5px 5px 0; } .search-bar:focus + .search-icon, From 2c8b1d3f31cbd95f6620aabc1803ab3481a4bf7e Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 17:32:06 +0700 Subject: [PATCH 2/7] improve design --- src/components/repository.js | 11 +- src/components/search-bar.js | 10 +- src/style/index.css | 228 ++++++++++++++++++++++++++--------- 3 files changed, 184 insertions(+), 65 deletions(-) diff --git a/src/components/repository.js b/src/components/repository.js index a21b1f4..454543b 100644 --- a/src/components/repository.js +++ b/src/components/repository.js @@ -33,12 +33,11 @@ const Repository = ({ item }) => (
-
- - {item.language} +
+
+ + {item.language} +
diff --git a/src/components/search-bar.js b/src/components/search-bar.js index 061fa19..33659bc 100644 --- a/src/components/search-bar.js +++ b/src/components/search-bar.js @@ -51,10 +51,12 @@ export default class SearchBar extends Component { src="/assets/icons/search-icon.svg" />
-
- {this.renderSearchContainer(order, ['stars', 'forks', 'updated'])} -
- {this.renderLanguageDropdown(languages)} +
+ {this.renderLanguageDropdown(languages)} +
+ {this.renderSearchContainer(order, ['stars', 'forks', 'updated'])} +
+
); } diff --git a/src/style/index.css b/src/style/index.css index 093c4af..77d23a5 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -5,7 +5,7 @@ body { width: 100%; padding: 0; margin: 0; - background: #FAFAFA; + background: #f3f3f3; font-family: 'Nunito', sans-serif; font-weight: 400; color: #444; @@ -39,12 +39,28 @@ body { } .load-more { - margin-top: 30px; + display: block; + width: 100%; + max-width: 200px; + padding: 10px 15px; + margin: 20px auto 0; + text-align: center; cursor: pointer; + border-radius: 5px; + background-color: #fefefe; + border: 1px solid #dedede; + box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); + transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s; } - .load-more:hover { - text-decoration: underline; + transform: scale(1.03); + /* text-decoration: underline; */ + background-color: #fafafa; + box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); +} +.load-more:active { + transform: scale(1.025); + opacity: 0.8; } .repository { @@ -53,33 +69,47 @@ body { height: auto; width: 90vw; max-width: 800px; - margin-top: 20px; - margin-bottom: 20px; + margin-top: 10px; + margin-bottom: 10px; overflow-wrap: break-word; border-radius: 5px; text-decoration: none; color: inherit; - background-color: #efefef; + background-color: #fefefe; + border: 1px solid #dedede; + box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s; } .repository:hover { - transform: scale(1.05); - box-shadow: 0 0 10px #ccc; + transform: scale(1.03); + box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); } .repository:active { - transform: scale(0.9); + transform: scale(1.025); opacity: 0.8; } .repository-name { - min-height: 50px; - font-size: 33px; - margin: 10px 20px 10px 20px; - background-size: 50px 50px; - background-repeat: no-repeat; - padding-left: 60px; + min-height: 70px; + font-size: 30px; + line-height: 50px; + margin: 0 0 10px; + background-size: 50px 50px; + background-repeat: no-repeat; + background-position: 10px; + border-radius: 5px 5px 0 0; + padding: 10px 15px; + padding-left: 70px; + background-color: #fafafa; + border-bottom: 1px solid #f6f6f6; +} +.repository-name span { + display: inline-block; + line-height: 1; + word-break: break-all; + vertical-align: middle; } .repository-name a { @@ -100,12 +130,24 @@ body { justify-content: space-between; align-items: flex-end; font-weight: bold; - font-size: 20px; + font-size: 18px; + padding: 0 15px; } +.repository-language-item { + display: inline-block; + border: 1px solid #eaeaea; + padding: 3px 8px; + border-radius: 20px; + background-color: #fafafa; + margin-bottom: 10px; +} +.repository-language-item .repository-language { + margin-bottom: 0; +} .repository-meta { margin-bottom: 10px; - margin-left: 20px; + /* margin-left: 20px; */ display: flex; align-items: center; } @@ -121,7 +163,7 @@ body { } .repository-stats { - margin: 10px; + margin: 10px 0; } .repository-stats div { @@ -134,19 +176,44 @@ body { } @media screen and (max-width: 800px) { + .repository-name { + font-size: 20px; + min-height: 50px; + line-height: 30px; + padding-left: 50px; + background-size: 30px 30px; + } .repository-meta-container { - font-size: 15px; + font-size: 14px; display: block; } + .repository-meta-container { + } .repository-stats { - margin-bottom: 10px; - margin-left: 20px; + padding: 0 10px; + margin: 0 -15px; + display: flex; + justify-content: space-between; + background-color: #fafafa; + border-radius: 0 0 5px 5px; + border-top: 1px solid #f6f6f6; + } + .repository-stats > div { + width: 33.33%; + padding: 10px 5px; + justify-content: center; + } + .repository-stats > div + div{ + border-left: 1px solid #f6f6f6; + margin-left: 0; } - .title { font-size: 60px; } + .load-more { + + } } .repository-description { @@ -164,7 +231,6 @@ body { } .search-bar { - background-color: #efefef; font-size: 24px; font-family: 'Nunito', sans-serif; color: #3d3d3d; @@ -174,6 +240,8 @@ body { border-radius: 5px; padding: 10px 20px; width: 100%; + background-color: #fafafa; + border: 1px solid #dedede; } .search-bar:focus { @@ -190,12 +258,14 @@ body { padding: 10px; position: absolute; top: 0; + bottom: 0; right: 0; vertical-align: middle; pointer-events: none; - background-color: #efefef; transition: opacity 0.3s; border-radius: 0 5px 5px 0; + border: 1px solid #dedede; + border-left: none; } .search-bar:focus + .search-icon, @@ -203,48 +273,61 @@ body { opacity: 0; } +.filter-container { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + width: 90vw; + max-width: 800px; + margin: 30px auto; +} + .search-order-container { - margin-top: 30px; + /* margin-top: 30px; */ display: flex; align-items: center; justify-content: center; } .search-order { - margin: 0 30px 0 30px; display: inline-flex; align-items: center; justify-content: center; } .search-order + .search-order { - margin-left: 10px; + margin-left: 20px; } .search-order label { - height: 13vw; - width: 13vw; - min-width: 20px; - max-width: 60px; - min-height: 20px; - max-height: 60px; + height: 40px; + width: 40px; +/* min-width: 20px; +max-width: 60px; +min-height: 20px; +max-height: 60px; */ background-size: 70%; background-repeat: no-repeat; background-position: center; - padding: 20px; - background-color: #efefef; + padding: 10px; + /* background-color: #f9f9f9; */ border-radius: 5px; cursor: pointer; + border: 1px solid transparent; + /* box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); */ transition: transform 0.2s, opacity 0.2s, background-color 0.2s, box-shadow 0.2s; } .search-order label:hover { - transform: scale(1.1); - box-shadow: 0 0 10px #ccc; + transform: scale(1.05); + background-color: #f9f9f9; + border-color: #dedede; + box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); } .search-order label:active { - transform: scale(0.9); + transform: scale(1.025); opacity: 0.8; } @@ -254,7 +337,10 @@ body { .search-order input[type="radio"]:checked + label { cursor: initial; - background-color: #14b866; + /* background-color: #14b866; */ + background-color: #fafafa; + border-color: #dedede; + box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); } .order-stars { @@ -278,24 +364,27 @@ body { } .language-dropdown { - margin-top: 30px; + /* margin-top: 30px; */ height: 40px; - background-color: #efefef; font-size: 16px; color: #3d3d3d; font-weight: bold; - width: 150px; + min-width: 150px; + padding: 0 30px 0 15px; cursor: pointer; border: none; - text-align-last: center; + /* text-align-last: center; */ border-radius: 5px; + -webkit-appearance: none; + background-color: #fafafa; + border: 1px solid #dedede; + box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); } .language-dropdown:hover { - background-color: #eee; - + background-color: #f6f6f6; transition: all 0.2s; - box-shadow: 0 0 10px #ccc; + /* box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); */ } .language-dropdown:focus { @@ -311,6 +400,20 @@ body { box-shadow: 0 0 10px #ccc; } + + +@media screen and (max-width: 800px) { + .filter-container { + flex-wrap: wrap; + justify-content: center; + margin: 20px auto 15px; + } + .search-order-container { + margin-top: 15px; + width: 100%; + } +} + .footer { padding: 40px; width: 90vw; @@ -382,15 +485,16 @@ body { } .custom-selectbox:after{ - content: " "; - height: 0; - width: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid #444; + content: ""; + height: 8px; + width: 8px; + border: 1px solid #777; + border-top-color: transparent; + border-left-color: transparent; position: absolute; - right: 2.5px; - top: 47.2px; + right: 10px; + top: 50%; + transform: rotate(45deg) translate(-50%, -50%); transition: all 0.3s linear; } @@ -403,3 +507,17 @@ body { .footer .contributor:hover { opacity: 0.7; } + +@media screen and (max-width: 800px) { + .footer { + padding: 20px 0; + margin: 30px auto 0; + } + .footer #footer-title { + font-size: 24px; + } + + .footer .footer-fork { + font-size: 24px; + } +} From 82233b63634e289fdc4c7d5d9954a576ac1b52e9 Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 17:41:32 +0700 Subject: [PATCH 3/7] fix pointer event of dropdown arrow --- src/style/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/index.css b/src/style/index.css index 77d23a5..8f1e2e7 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -494,6 +494,7 @@ max-height: 60px; */ position: absolute; right: 10px; top: 50%; + pointer-events: none; transform: rotate(45deg) translate(-50%, -50%); transition: all 0.3s linear; } From 891058645f3ef0cddec1e481d05bf597e123f420 Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 18:05:52 +0700 Subject: [PATCH 4/7] fix csslint --- src/style/index.css | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/src/style/index.css b/src/style/index.css index 8f1e2e7..ead5148 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -37,6 +37,13 @@ body { text-align: left; margin-top: 10px; } +.language-dropdown, +.load-more, +.repository, +.search-bar, +.search-bar + .search-icon { + border: 1px solid #dedede; +} .load-more { display: block; @@ -48,13 +55,11 @@ body { cursor: pointer; border-radius: 5px; background-color: #fefefe; - border: 1px solid #dedede; box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s; } .load-more:hover { transform: scale(1.03); - /* text-decoration: underline; */ background-color: #fafafa; box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); } @@ -76,7 +81,6 @@ body { text-decoration: none; color: inherit; background-color: #fefefe; - border: 1px solid #dedede; box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s; } @@ -147,7 +151,6 @@ body { } .repository-meta { margin-bottom: 10px; - /* margin-left: 20px; */ display: flex; align-items: center; } @@ -186,9 +189,6 @@ body { .repository-meta-container { font-size: 14px; display: block; - } - .repository-meta-container { - } .repository-stats { padding: 0 10px; @@ -211,9 +211,6 @@ body { .title { font-size: 60px; } - .load-more { - - } } .repository-description { @@ -241,7 +238,6 @@ body { padding: 10px 20px; width: 100%; background-color: #fafafa; - border: 1px solid #dedede; } .search-bar:focus { @@ -264,7 +260,6 @@ body { pointer-events: none; transition: opacity 0.3s; border-radius: 0 5px 5px 0; - border: 1px solid #dedede; border-left: none; } @@ -284,7 +279,6 @@ body { } .search-order-container { - /* margin-top: 30px; */ display: flex; align-items: center; justify-content: center; @@ -303,19 +297,13 @@ body { .search-order label { height: 40px; width: 40px; -/* min-width: 20px; -max-width: 60px; -min-height: 20px; -max-height: 60px; */ background-size: 70%; background-repeat: no-repeat; background-position: center; padding: 10px; - /* background-color: #f9f9f9; */ border-radius: 5px; cursor: pointer; border: 1px solid transparent; - /* box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); */ transition: transform 0.2s, opacity 0.2s, background-color 0.2s, box-shadow 0.2s; } @@ -337,7 +325,6 @@ max-height: 60px; */ .search-order input[type="radio"]:checked + label { cursor: initial; - /* background-color: #14b866; */ background-color: #fafafa; border-color: #dedede; box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); @@ -359,12 +346,10 @@ max-height: 60px; */ margin: 0; padding: 0; -webkit-appearance: none; - -moz-appearance: none; appearance: none; } .language-dropdown { - /* margin-top: 30px; */ height: 40px; font-size: 16px; color: #3d3d3d; @@ -373,18 +358,15 @@ max-height: 60px; */ padding: 0 30px 0 15px; cursor: pointer; border: none; - /* text-align-last: center; */ border-radius: 5px; -webkit-appearance: none; background-color: #fafafa; - border: 1px solid #dedede; box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); } .language-dropdown:hover { background-color: #f6f6f6; transition: all 0.2s; - /* box-shadow: 0 5px 18px -4px rgba(0,0,0,.1); */ } .language-dropdown:focus { From f0239b4e424a40f162d6f9ff7e13bd1445615d26 Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 18:06:57 +0700 Subject: [PATCH 5/7] fix csslint "-moz-appearance" --- src/style/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style/index.css b/src/style/index.css index ead5148..cc4a4f0 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -345,7 +345,7 @@ body { .search-order input { margin: 0; padding: 0; - -webkit-appearance: none; + -moz-appearance: none; appearance: none; } @@ -359,7 +359,7 @@ body { cursor: pointer; border: none; border-radius: 5px; - -webkit-appearance: none; + -moz-appearance: none; background-color: #fafafa; box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); } From ff0d36247e7e1f3590c240351e35bf241deb0dba Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 18:11:31 +0700 Subject: [PATCH 6/7] fix csslint "compatible vendor prefixes" --- src/style/index.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/style/index.css b/src/style/index.css index cc4a4f0..8da013c 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -345,6 +345,7 @@ body { .search-order input { margin: 0; padding: 0; + -webkit-appearance: none; -moz-appearance: none; appearance: none; } @@ -359,7 +360,9 @@ body { cursor: pointer; border: none; border-radius: 5px; + -webkit-appearance: none; -moz-appearance: none; + appearance: none; background-color: #fafafa; box-shadow: 0 2px 6px -2px rgba(50,50,50,.1); } From 080cfbcb0a981756568f1d6b8dfe59bb2a69ee6a Mon Sep 17 00:00:00 2001 From: Anuruk Surin Date: Mon, 30 Oct 2017 18:13:12 +0700 Subject: [PATCH 7/7] fix component border --- src/style/index.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/style/index.css b/src/style/index.css index 8da013c..303d6f0 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -37,13 +37,6 @@ body { text-align: left; margin-top: 10px; } -.language-dropdown, -.load-more, -.repository, -.search-bar, -.search-bar + .search-icon { - border: 1px solid #dedede; -} .load-more { display: block; @@ -399,6 +392,15 @@ body { } } + +.language-dropdown, +.load-more, +.repository, +.search-bar, +.search-bar + .search-icon { + border: 1px solid #dedede; +} + .footer { padding: 40px; width: 90vw;