diff --git a/docs/design/Baner.psd b/docs/design/Baner.psd new file mode 100644 index 0000000..717729b Binary files /dev/null and b/docs/design/Baner.psd differ diff --git a/docs/design/FexApp.xd b/docs/design/FexApp.xd new file mode 100644 index 0000000..82b16fa Binary files /dev/null and b/docs/design/FexApp.xd differ diff --git a/docs/design/LayOut.xd b/docs/design/LayOut.xd new file mode 100644 index 0000000..ed6f6c4 Binary files /dev/null and b/docs/design/LayOut.xd differ diff --git a/docs/design/Logo.png b/docs/design/Logo.png new file mode 100644 index 0000000..55d6570 Binary files /dev/null and b/docs/design/Logo.png differ diff --git a/docs/design/Logo.psd b/docs/design/Logo.psd new file mode 100644 index 0000000..879cd1d Binary files /dev/null and b/docs/design/Logo.psd differ diff --git a/docs/design/Logo.xd b/docs/design/Logo.xd new file mode 100644 index 0000000..28bef4a Binary files /dev/null and b/docs/design/Logo.xd differ diff --git a/docs/design/assets/font/Pesaro-Bold.ttf b/docs/design/assets/font/Pesaro-Bold.ttf new file mode 100644 index 0000000..6f26890 Binary files /dev/null and b/docs/design/assets/font/Pesaro-Bold.ttf differ diff --git a/docs/design/assets/imgs/Baner.png b/docs/design/assets/imgs/Baner.png new file mode 100644 index 0000000..bf07010 Binary files /dev/null and b/docs/design/assets/imgs/Baner.png differ diff --git a/docs/design/assets/imgs/Extension-1.png b/docs/design/assets/imgs/Extension-1.png new file mode 100644 index 0000000..41100c4 Binary files /dev/null and b/docs/design/assets/imgs/Extension-1.png differ diff --git a/docs/design/assets/imgs/Extension-2.png b/docs/design/assets/imgs/Extension-2.png new file mode 100644 index 0000000..41100c4 Binary files /dev/null and b/docs/design/assets/imgs/Extension-2.png differ diff --git a/docs/design/assets/imgs/Extension.png b/docs/design/assets/imgs/Extension.png new file mode 100644 index 0000000..41100c4 Binary files /dev/null and b/docs/design/assets/imgs/Extension.png differ diff --git a/docs/design/assets/imgs/FlaskBlack-1.png b/docs/design/assets/imgs/FlaskBlack-1.png new file mode 100644 index 0000000..690a279 Binary files /dev/null and b/docs/design/assets/imgs/FlaskBlack-1.png differ diff --git a/docs/design/assets/imgs/FlaskBlack.png b/docs/design/assets/imgs/FlaskBlack.png new file mode 100644 index 0000000..690a279 Binary files /dev/null and b/docs/design/assets/imgs/FlaskBlack.png differ diff --git a/docs/design/assets/imgs/FlaskTrans.png b/docs/design/assets/imgs/FlaskTrans.png new file mode 100644 index 0000000..b410729 Binary files /dev/null and b/docs/design/assets/imgs/FlaskTrans.png differ diff --git a/docs/design/assets/imgs/FlaskWhite.png b/docs/design/assets/imgs/FlaskWhite.png new file mode 100644 index 0000000..e0b285d Binary files /dev/null and b/docs/design/assets/imgs/FlaskWhite.png differ diff --git a/docs/design/assets/imgs/Logo-MB.png b/docs/design/assets/imgs/Logo-MB.png new file mode 100644 index 0000000..ecfcd8a Binary files /dev/null and b/docs/design/assets/imgs/Logo-MB.png differ diff --git a/docs/design/assets/imgs/Logo.png b/docs/design/assets/imgs/Logo.png new file mode 100644 index 0000000..714573c Binary files /dev/null and b/docs/design/assets/imgs/Logo.png differ diff --git a/docs/design/font/OnlineWebFonts_COM_413b1d12b8ea74e9b40edaf926bc792b.zip b/docs/design/font/OnlineWebFonts_COM_413b1d12b8ea74e9b40edaf926bc792b.zip new file mode 100644 index 0000000..a26af56 Binary files /dev/null and b/docs/design/font/OnlineWebFonts_COM_413b1d12b8ea74e9b40edaf926bc792b.zip differ diff --git a/docs/design/gifs/flaskextensions_FexApp_Build-0.1.0.gif b/docs/design/gifs/flaskextensions_FexApp_Build-0.1.0.gif new file mode 100644 index 0000000..f690270 Binary files /dev/null and b/docs/design/gifs/flaskextensions_FexApp_Build-0.1.0.gif differ diff --git a/docs/design/gifs/flaskextensions_FexApp_prop.gif b/docs/design/gifs/flaskextensions_FexApp_prop.gif new file mode 100644 index 0000000..5b87d92 Binary files /dev/null and b/docs/design/gifs/flaskextensions_FexApp_prop.gif differ diff --git a/docs/design/gifs/flaskextensions_Fex_UI_HerroDinamic.gif b/docs/design/gifs/flaskextensions_Fex_UI_HerroDinamic.gif new file mode 100644 index 0000000..9abb5f5 Binary files /dev/null and b/docs/design/gifs/flaskextensions_Fex_UI_HerroDinamic.gif differ diff --git a/docs/design/gifs/flaskextensions_Props.gif b/docs/design/gifs/flaskextensions_Props.gif new file mode 100644 index 0000000..213ab59 Binary files /dev/null and b/docs/design/gifs/flaskextensions_Props.gif differ diff --git a/docs/design/gifs/flaskextensions_pagError.gif b/docs/design/gifs/flaskextensions_pagError.gif new file mode 100644 index 0000000..3ba9ca0 Binary files /dev/null and b/docs/design/gifs/flaskextensions_pagError.gif differ diff --git a/docs/design/imgs/Baner-SM.png b/docs/design/imgs/Baner-SM.png new file mode 100644 index 0000000..184f3f3 Binary files /dev/null and b/docs/design/imgs/Baner-SM.png differ diff --git a/docs/design/imgs/Baner.png b/docs/design/imgs/Baner.png new file mode 100644 index 0000000..186f632 Binary files /dev/null and b/docs/design/imgs/Baner.png differ diff --git a/docs/design/imgs/FlaskBlack.png b/docs/design/imgs/FlaskBlack.png new file mode 100644 index 0000000..78396e2 Binary files /dev/null and b/docs/design/imgs/FlaskBlack.png differ diff --git a/docs/design/imgs/FlaskTrans.png b/docs/design/imgs/FlaskTrans.png new file mode 100644 index 0000000..1f7a9fa Binary files /dev/null and b/docs/design/imgs/FlaskTrans.png differ diff --git a/docs/design/imgs/FlaskWhite.png b/docs/design/imgs/FlaskWhite.png new file mode 100644 index 0000000..be0c840 Binary files /dev/null and b/docs/design/imgs/FlaskWhite.png differ diff --git a/docs/design/imgs/kisspng-flask-by-example-web-framework-python-bottle-sebastian-estenssoro-5b6c0aa37f9672.5900311015338072675226.png b/docs/design/imgs/kisspng-flask-by-example-web-framework-python-bottle-sebastian-estenssoro-5b6c0aa37f9672.5900311015338072675226.png new file mode 100644 index 0000000..9b4e2e4 Binary files /dev/null and b/docs/design/imgs/kisspng-flask-by-example-web-framework-python-bottle-sebastian-estenssoro-5b6c0aa37f9672.5900311015338072675226.png differ diff --git a/fexui/css/custom.css b/fexui/css/custom.css index 13008fa..8d83964 100755 --- a/fexui/css/custom.css +++ b/fexui/css/custom.css @@ -1,10 +1,16 @@ +@font-face { + font-family: PesaroBold; + src: url(../font/PesaroBold.ttf); +} + .site { - display: flex; - min-height: 100vh; - flex-direction: column; + display: flex; + min-height: 100vh; + flex-direction: column; } + .site-container { - flex: 1; + flex: 1; } #search-form { @@ -21,20 +27,97 @@ } .card-content { - height: 130px; + height: 210px; } -.level-item span.meta { - margin-left: 5px !important; +.description { + height: 125px; } -input[type=search] { - margin-bottom: 40px; +.level-item span.meta { + margin-left: 5px !important; } + .filters form .field { - margin-top: 30px; + margin-top: 30px; } section.top-status { padding: 1rem 1.5rem; } + +.baner { + background-image: url(../img/Baner.png); + background-position: top; + background-size: 100%; + background-repeat: no-repeat; +} + +.bk-null { + background-color: transparent; +} + +.img-hero { + margin-top: 35px; +} + +.info-hero { + font-family: PesaroBold; + font-size: 2.5rem; +} + +.pagination > a:hover { + color: white; + background-color: #1d9cc9; + border-color: #ddd; +} + +.card-footer > .left:hover { + color: white; + background-color: #1d9cc9; + border-end-start-radius: 5px; +} + +.card-footer > .right:hover { + color: white; + background-color: #1d9cc9; + border-end-end-radius: 5px; +} + +.card-content > .columns > .column { + padding-top: 0px !important; +} + +.log-flask-extension { + display: none; + background-image: url(../img/Logo-MB.png); + background-position: top; + background-repeat: no-repeat; + background-size: cover; + position: relative; + height: 100px; + margin-top: 5px; + margin-left: auto; + margin-right: auto; +} + +@media only screen and (max-width: 600px) { + .baner { + background-image: url(../img/Baner-SM.png); + } + .info-hero { + color: #1d9cc9 !important; + } + .subtitle-hero { + color: #494949 !important; + } + .log-flask-extension { + display: block; + } + .hero-body { + padding-top: 0px !important; + } + .hero-head { + display: none; + } +} diff --git a/fexui/font/PesaroBold.ttf b/fexui/font/PesaroBold.ttf new file mode 100644 index 0000000..6f26890 Binary files /dev/null and b/fexui/font/PesaroBold.ttf differ diff --git a/fexui/img/Baner-SM.png b/fexui/img/Baner-SM.png new file mode 100644 index 0000000..184f3f3 Binary files /dev/null and b/fexui/img/Baner-SM.png differ diff --git a/fexui/img/Baner.png b/fexui/img/Baner.png new file mode 100644 index 0000000..bf07010 Binary files /dev/null and b/fexui/img/Baner.png differ diff --git a/fexui/img/Extension.png b/fexui/img/Extension.png new file mode 100644 index 0000000..41100c4 Binary files /dev/null and b/fexui/img/Extension.png differ diff --git a/fexui/img/FlaskBlack.png b/fexui/img/FlaskBlack.png new file mode 100644 index 0000000..690a279 Binary files /dev/null and b/fexui/img/FlaskBlack.png differ diff --git a/fexui/img/FlaskTrans.png b/fexui/img/FlaskTrans.png new file mode 100644 index 0000000..b410729 Binary files /dev/null and b/fexui/img/FlaskTrans.png differ diff --git a/fexui/img/FlaskWhite.png b/fexui/img/FlaskWhite.png new file mode 100644 index 0000000..e0b285d Binary files /dev/null and b/fexui/img/FlaskWhite.png differ diff --git a/fexui/img/Logo-MB.png b/fexui/img/Logo-MB.png new file mode 100644 index 0000000..ecfcd8a Binary files /dev/null and b/fexui/img/Logo-MB.png differ diff --git a/fexui/img/hero.png b/fexui/img/hero.png new file mode 100644 index 0000000..3854b69 Binary files /dev/null and b/fexui/img/hero.png differ diff --git a/fexui/img/logo.png b/fexui/img/logo.png index 784c41e..714573c 100644 Binary files a/fexui/img/logo.png and b/fexui/img/logo.png differ diff --git a/fexui/index.html b/fexui/index.html index 77568cd..79c489f 100755 --- a/fexui/index.html +++ b/fexui/index.html @@ -1,163 +1,309 @@ + + + + Flask Extensions + + + + - - - - Flask Extensions - - - - - - -
-
-
- -
- -
-
-

Find the Flask extension you need for your Python project.

-

Add flask-extension topic to a repository to get it listed

-

Rank is calculated based on stars + last update + number of contributors

-
-
-
- +
+
+ Hero Baner
-
-
-
- +
+

Find the Flask extension

+

you need for your

+

Python project.

+
+

+ Add + flask-extension + topic to a repository to get it listed +

-
-
+ -
-
-
-
-

Total Results: {{result.page.total}}

-
- +
+
+ +
+ + + +
+
- -
+ -
-
-
-
-
-
-
-
-

- {{ extension.name }} -

-
-
-
- {{ extension.description | truncate }} +
+
+
+
+
+
+
+
+

+ {{ extension.name }} +

+
+
+
+ {{ extension.description | truncate }} +
+
+
+ + + + {{ extension.stargazers_count }} +
+
+ + + + {{ extension.created_at }} +
+
+
+
+ + + + {{ extension.forks_count}} +
+
+ + + + {{ extension.updated_at}} +
+
+
-
-
-
- +
- -
+
+
+ + + + + diff --git a/fexui/js/main.js b/fexui/js/main.js index 6d024fb..c027aaf 100644 --- a/fexui/js/main.js +++ b/fexui/js/main.js @@ -1,5 +1,6 @@ const instance = axios.create({ - baseURL: "http://localhost:8000/", + baseURL: `//${window.location.hostname}:8000/`, + // baseURL: "http://161.35.57.225:8000/", }); new Vue({ @@ -7,22 +8,54 @@ new Vue({ data: { result: {}, term: "", + shotBy: "stars", + hero: true, }, + async mounted() { const resp = await instance.get("extension/"); this.result = resp.data; + this.adjustDate(); + this.changeShort(); + setTimeout(() => { + this.hero = true; + }, 1000); }, + filters: { truncate: function (text) { - if (text.length > 80) return text.substring(0, 80) + " [...]"; + if (text != null) { + if (text.length > 100) return text.substring(0, 100) + " [...]"; + } else { + text = ""; + } return text; }, }, + + watch: { + term(val) { + if (val.length == 0) { + setTimeout(() => { + this.hero = true; + }, 500); + } + }, + }, + methods: { async search() { const resp = await instance.get(`extension/?query=${this.term}`); this.result = resp.data; + if (this.result.items.length > 0 && this.term.length != 0) { + this.hero = false; + } else { + this.hero = true; + } + this.adjustDate(); + this.changeShort(); }, + async paginate(paginate_to) { const resp = await instance.get("extension/", { params: { @@ -32,11 +65,62 @@ new Vue({ }, }); this.result = resp.data; + this.adjustDate(); + this.changeShort(); + }, + + changeShort() { + this.shotBy = this.$refs.selectShort.value; + switch (this.shotBy) { + case "stars": + this.shortByStars(); + break; + case "forks": + this.shortByForks(); + break; + default: + this.shortByName(); + } + }, + + shortByName() { + this.result.items = this.result.items.sort((a, b) => + a.name.localeCompare(b.name) + ); + }, + + shortByStars() { + this.result.items = this.result.items.sort(function (a, b) { + return b.stargazers_count - a.stargazers_count; + }); + }, + + shortByForks() { + this.result.items = this.result.items.sort(function (a, b) { + return b.forks_count - a.forks_count; + }); + }, + + adjustDate() { + Object.entries(this.result.items).forEach((value) => { + let created_at = new Date(value[1].created_at.replace("T", " ")) + .toDateString() + .slice(4, 15) + .replace(" ", "-") + .replace(" ", "-"); + value[1].created_at = created_at; + + let updated_at = new Date(value[1].updated_at.replace("T", " ")) + .toDateString() + .slice(4, 15) + .replace(" ", "-") + .replace(" ", "-"); + value[1].updated_at = updated_at; + }); }, }, }); - // result = { // "page": { // "total": 0,