From b1d2cf6f9b08ebfc575e343bf296ad95f879f9c7 Mon Sep 17 00:00:00 2001 From: Evgenii Vedegis Date: Thu, 27 May 2021 22:51:34 +0800 Subject: [PATCH] added vue-cli + components --- .browserslistrc | 3 + .editorconfig | 10 + .gitignore | 23 + README.md | 19 + babel.config.js | 5 + package.json | 20 + prettier.config.js | 10 + public/favicon.ico | Bin 0 -> 4286 bytes public/index.html | 17 + src/App.vue | 47 + src/assets/.gitkeep | 0 src/assets/scss/common/_common.scss | 8 + src/assets/scss/common/buttons.scss | 23 + src/assets/scss/common/form.scss | 49 + src/assets/scss/common/tweet.scss | 81 + src/assets/scss/main.scss | 119 + src/assets/scss/utils/reset.scss | 62 + src/assets/scss/utils/vars.scss | 16 + src/components/Form.vue | 30 + src/components/Item.vue | 46 + src/components/List.vue | 19 + src/main.js | 6 + yarn.lock | 8576 +++++++++++++++++++++++++++ 23 files changed, 9189 insertions(+) create mode 100644 .browserslistrc create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 README.md create mode 100644 babel.config.js create mode 100644 package.json create mode 100644 prettier.config.js create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 src/App.vue create mode 100644 src/assets/.gitkeep create mode 100644 src/assets/scss/common/_common.scss create mode 100644 src/assets/scss/common/buttons.scss create mode 100644 src/assets/scss/common/form.scss create mode 100644 src/assets/scss/common/tweet.scss create mode 100644 src/assets/scss/main.scss create mode 100644 src/assets/scss/utils/reset.scss create mode 100644 src/assets/scss/utils/vars.scss create mode 100644 src/components/Form.vue create mode 100644 src/components/Item.vue create mode 100644 src/components/List.vue create mode 100644 src/main.js create mode 100644 yarn.lock diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..214388f --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..03118bd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# editorconfig.org +root = true + +[*] +end_of_line = lf +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..403adbc --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md new file mode 100644 index 0000000..ff588e2 --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +# tocode-youtube-vtwitter-vue-cli + +## Project setup +``` +yarn install +``` + +### Compiles and hot-reloads for development +``` +yarn serve +``` + +### Compiles and minifies for production +``` +yarn build +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e955840 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..691e5a4 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "tocode-youtube-vtwitter-vue-cli", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build" + }, + "dependencies": { + "core-js": "^3.6.5", + "vue": "^3.0.0" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-service": "~4.5.0", + "@vue/compiler-sfc": "^3.0.0", + "node-sass": "^4.12.0", + "sass-loader": "^8.0.2" + } +} diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..f9aa115 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,10 @@ +module.exports = { + semi: false, + singleQuote: true, + arrowParens: 'avoid', + trailingComma: 'none', + endOfLine: 'auto', + htmlFormatWrapAttributes: 'force-aligned' + + // spaceBeforeFunctionParen: true +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..3e5a139 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..d711b96 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/common/_common.scss b/src/assets/scss/common/_common.scss new file mode 100644 index 0000000..8a4ce4b --- /dev/null +++ b/src/assets/scss/common/_common.scss @@ -0,0 +1,8 @@ +// Buttons +@import 'buttons'; + +// Card +@import 'tweet'; + +// form +@import 'form'; diff --git a/src/assets/scss/common/buttons.scss b/src/assets/scss/common/buttons.scss new file mode 100644 index 0000000..fdc5dfe --- /dev/null +++ b/src/assets/scss/common/buttons.scss @@ -0,0 +1,23 @@ +.btn { + display: inline-block; + padding: 0.8em 2em; + line-height: 1; + text-transform: uppercase; + cursor: pointer; + border-radius: 30px; +} + +.btnTweet { + display: flex; + justify-content: center; + color: #fff; + background-color: #33a1f2; + border: 1px solid #33a1f2; + padding: 16px; + font-weight: 700; + font-size: 16px; + cursor: pointer; + &:hover { + background-color: #2c8ed6; + } +} diff --git a/src/assets/scss/common/form.scss b/src/assets/scss/common/form.scss new file mode 100644 index 0000000..b11f999 --- /dev/null +++ b/src/assets/scss/common/form.scss @@ -0,0 +1,49 @@ +form { + padding-bottom: 20px; + margin-bottom: 20px; + .form-controls { + display: flex; + align-items: center; + } +} + +textarea { + width: 100%; + font-size: 24px; + padding: 30px 27px; + margin-bottom: 20px; + border-radius: 14px; + border: 1px solid #fff; + border-bottom: 1px solid #ebeef0; +} + +select { + width: 100%; + max-width: 348px; + min-height: 46px; + padding: 16px 20px; + font-size: 16px; + border: 1px solid #fff; + border-radius: 34px; + line-height: 20px; + outline: 0; + -moz-appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), + linear-gradient(to bottom, #f8f8f8 0%, #f6f6f6 100%); + background-repeat: no-repeat, repeat; + /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ + background-position: right 0.7em top 50%, 0 0; + /* icon size, then gradient */ + background-size: 0.65em auto, 100%; + &:hover { + cursor: pointer; + } + &:focus { + cursor: pointer; + outline: none; + } + option { + font-weight: 400; + } +} diff --git a/src/assets/scss/common/tweet.scss b/src/assets/scss/common/tweet.scss new file mode 100644 index 0000000..8c47b00 --- /dev/null +++ b/src/assets/scss/common/tweet.scss @@ -0,0 +1,81 @@ +.tweets__wrapper { + display: flex; + flex-direction: column; +} + +.tweet__wrapper { + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 14px 16px; + border-bottom: 1px solid #ebeef0; + transition: background-color 1s linear; + &:hover { + background-color: rgba(0, 0, 0, 0.03); + } +} + +.tweet { + display: flex; + margin-top: 3px; + position: relative; + .avatar { + width: 49px; + height: 49px; + position: absolute; + top: 0; + left: 0; + img { + width: 100%; + height: 100%; + border: 1px solid #fff; + border-radius: 50%; + } + } + .like { + display: flex; + align-items: center; + max-width: 80px; + color: #5b7083; + cursor: pointer; + .icon { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + margin-left: -11px; + border-radius: 50%; + transition: background-color 0.2s linear; + } + span { + padding-left: 6px; + } + &:hover { + color: rgba(224, 36, 94, 1); + .icon { + background-color: rgba(224, 36, 94, 0.1); + svg { + fill: rgba(224, 36, 94, 1); + } + } + } + } +} + +.tweet-header { + display: block; + margin-bottom: 14px; + color: #5b7083; + font-size: 15px; + white-space: nowrap; +} + +.tweet-content { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 2px; + padding-left: 74px; +} diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss new file mode 100644 index 0000000..8cb9dcf --- /dev/null +++ b/src/assets/scss/main.scss @@ -0,0 +1,119 @@ +@import 'utils/vars'; +@import 'utils/reset'; + +html { + line-height: $mainLineHeight; + font-size: $mainFontSize; + color: $mainFontColor; + height: 100%; + @media screen and (max-width: $desktopWidth) { + font-size: 16px; + } + @media screen and (max-width: $tableWidth) { + font-size: 15px; + } + @media screen and (max-width: $phoneWidth) { + font-size: 14px; + } +} + +body { + font-family: $mainFont; + font-size: $mainFontSize; + font-weight: $mainFontWeight; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 0; + padding: 0; + // background-color: #f7f7f7; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +a { + text-decoration: none; +} + +ul, +li { + list-style-type: none; + margin: 0; + padding: 0; +} + +footer { + margin-top: 60px; +} +section, +.section { + position: relative; + padding: 40px 0; + @media screen and (max-width: $desktopWidth) { + padding: 36px 0; + } + @media screen and (max-width: $desktopWidth) { + padding: 28px 0; + } + @media screen and (max-width: $desktopWidth) { + padding: 20px 0; + } +} + +.wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0 auto; +} + +.wrapper-content { + display: flex; + flex-direction: column; + min-height: 70vh; + margin-top: 40px; // if header is fixed do 40px+headerHeight +} + +.container { + position: relative; + flex: 0 0 auto; + margin: 0 auto; + width: 100%; + max-width: $lgDesktopWidth; + @media screen and (max-width: $lgDesktopWidth) { + padding: 0 16px; + } + @media screen and (max-width: $smDesktopWidth) { + max-width: $tableWidth; + } + @media screen and (max-width: $tableWidth) { + max-width: $smTableWidth; + } + @media screen and (max-width: $smTableWidth) { + max-width: $phoneWidth; + } + @media screen and (max-width: $phoneWidth) { + max-width: $smPhoneWidth; + } +} + +.view { + width: 100%; + max-width: 700px; + margin-left: auto; + margin-right: auto; +} + +@import './common/_common'; diff --git a/src/assets/scss/utils/reset.scss b/src/assets/scss/utils/reset.scss new file mode 100644 index 0000000..0d95742 --- /dev/null +++ b/src/assets/scss/utils/reset.scss @@ -0,0 +1,62 @@ +// Default +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; +} + +// Links +a { + text-decoration: none; + &:active, &:hover { + outline: 0; + } +} + +// List +ul, li { + list-style-type: none; + margin: 0; + padding: 0; +} + +// Headlines +h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } + +// Default +html { box-sizing: border-box; } +*, *:before, *:after { box-sizing: border-box; } +:focus { outline: 0; } + +img, audio, video { max-width: 100%; height: auto; } +audio, canvas, iframe, video, img, svg { vertical-align: middle; } +iframe { border: 0 } + +// From +textarea { + resize: none; /*remove the resize handle on the bottom right*/ + overflow: auto; + vertical-align: top; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} +input, textarea, select, button { outline: none; border: none; font-size: 100%; margin: 0;} +button, input { line-height: normal; } + +// Table +table { border-collapse: collapse; border-spacing: 0; } +td, th { padding: 0; text-align: left; } \ No newline at end of file diff --git a/src/assets/scss/utils/vars.scss b/src/assets/scss/utils/vars.scss new file mode 100644 index 0000000..d055ffe --- /dev/null +++ b/src/assets/scss/utils/vars.scss @@ -0,0 +1,16 @@ +// Font +$mainFont: 'Montserrat', Helvetica, Arial, sans-serif; + +// Size +$mainFontColor: #101010; +$mainFontSize: 18px; +$mainFontWeight: 400; +$mainLineHeight: 1.4; + +$lgDesktopWidth: 1400px; +$desktopWidth: 1280px; +$smDesktopWidth: 1024px; +$tableWidth: 768px; +$smTableWidth: 640px; +$phoneWidth: 480px; +$smPhoneWidth: 320px; diff --git a/src/components/Form.vue b/src/components/Form.vue new file mode 100644 index 0000000..c71a95b --- /dev/null +++ b/src/components/Form.vue @@ -0,0 +1,30 @@ +