-
-
-
-
- {{ charla.votos }} votos
-
-
- ![]()
+
+
+
+
+
+
+
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 7c54bc7..2ddb366 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -26,7 +26,6 @@ export default {
min-width: 200px;
height: 40px;
}
-
.input-field {
display: inline-flex;
width: calc(100% - 72.75px);
@@ -36,7 +35,6 @@ export default {
border-radius: 4px;
padding-left: 72px;
}
-
.input-field input {
border: none;
background-color: transparent;
@@ -45,13 +43,11 @@ export default {
font-size: 14px;
width: 100%;
}
-
.input-field:hover,
.input-field:focus {
background: white;
border: 0.75px solid rgb(0, 121, 211);
}
-
.icon-container {
position: absolute;
height: 38px;
@@ -61,17 +57,14 @@ export default {
justify-content: center;
align-items: center;
}
-
.icon {
height: 18px;
color: #00a7e1;
font-size: 20px;
}
-
@media (min-width: 767px) {
.header__search {
margin: 0 24px;
}
}
-
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..81e205e
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
diff --git a/src/components/SocialMenu.vue b/src/components/SocialMenu.vue
index 14b4c37..919d574 100644
--- a/src/components/SocialMenu.vue
+++ b/src/components/SocialMenu.vue
@@ -34,19 +34,16 @@ export default {
margin-top: 8px;
display: flex;
}
-
.subheader__social > li {
list-style-type: none;
font-size: 32px;
color: #00a7e1;
padding: 0 8px;
}
-
.subheader__social > li a {
color: inherit;
text-decoration: none;
}
-
@media (min-width: 767px) {
.subheader__social {
margin-top: 0;
diff --git a/src/router.js b/src/router.js
index aa76ca1..75168c6 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,15 +1,23 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
+import Detail from './views/DetailView.vue'
Vue.use(Router)
export default new Router({
+ mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
+ },
+ {
+ path: '/detail/:id',
+ name: 'detail',
+ component: Detail,
+ props: true
}
// {
// path: '/about',
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
new file mode 100644
index 0000000..2dcb753
--- /dev/null
+++ b/src/views/DetailView.vue
@@ -0,0 +1,52 @@
+
+
+
@@ -36,7 +40,8 @@ export default {
usuario: 'Rafael Villareal',
votos: '20',
imgUrl: 'https://imgur.com/veyASfn.png',
- upvoted: false
+ upvoted: false,
+ id: 0
},
{
titulo: 'Big Data y Cloud Computing',
@@ -44,7 +49,8 @@ export default {
usuario: 'Rafael Villareal',
votos: '20',
imgUrl: 'https://imgur.com/o96FbDB.png',
- upvoted: false
+ upvoted: false,
+ id: 1
},
{
titulo: 'Docker-py',
@@ -52,7 +58,8 @@ export default {
usuario: 'Rafael Villareal',
votos: '20',
imgUrl: 'https://imgur.com/819GxJm.png',
- upvoted: false
+ upvoted: false,
+ id: 2
},
{
titulo: 'Pasarela de Pagos',
@@ -60,7 +67,8 @@ export default {
usuario: 'Rafael Villareal',
votos: '20',
imgUrl: 'https://imgur.com/u9iSLfM.png',
- upvoted: false
+ upvoted: false,
+ id: 3
},
{
titulo: 'Como usar GraphQL con Django y Flask',
@@ -68,7 +76,8 @@ export default {
usuario: 'Rafael Villareal',
votos: '20',
imgUrl: 'https://imgur.com/40lBxyW.png',
- upvoted: false
+ upvoted: false,
+ id: 4
}
]
}
diff --git a/src/components/CharlasDetail.vue b/src/components/CharlasDetail.vue
new file mode 100644
index 0000000..4dfb2e2
--- /dev/null
+++ b/src/components/CharlasDetail.vue
@@ -0,0 +1,155 @@
+
+
+
+
-
+
+
+
+ {{ charla.votos }} votos
+
+
+
+ ![]()
+
+
+
-
+ {{ charla.titulo }}
+
+
-
{{ charla.titulo }}
-
+
+
+
+
+
+
diff --git a/src/components/CommentSection.vue b/src/components/CommentSection.vue
new file mode 100644
index 0000000..a80f893
--- /dev/null
+++ b/src/components/CommentSection.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+ ![]()
+
+
+
+ {{ testData[$route.params.id].titulo }}
+
+
+ Muchas de las herramientas que se usan para pruebas de penetración en diferentes entornos están hechas con python. La idea es tomar alguna función pequeña de estas herramientas y recrearla con python.
+
+
+
+
+
+
+
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 08144ba..d0a0d39 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,11 +2,11 @@
@@ -15,7 +15,6 @@
import SearchInput from './SearchInput'
import Menu from './Menu'
import SocialMenu from './SocialMenu'
-
export default {
name: 'Header',
components: {
@@ -43,7 +42,6 @@ export default {
color: #00a7e1;
display: inline-block;
}
-
/* Subheader */
.subheader {
display: flex;
@@ -69,4 +67,4 @@ export default {
border-bottom: 1px solid #e5e5e5;
}
}
-
\ No newline at end of file
+
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 6cfa7f4..4fd4bb5 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -19,7 +19,6 @@ export default {
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
-
.subheader__item {
padding: 13px;
text-align: center;
@@ -28,18 +27,15 @@ export default {
font-size: 14px;
color: #4d646d;
}
-
.subheader__item--active {
border-bottom: 2px solid #00a7e1;
/* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25); */
color: #000000;
}
-
@media (min-width: 767px) {
.subheader__list {
width: 400px;
box-shadow: none;
}
}
-
diff --git a/src/components/PostularTema.vue b/src/components/PostularTema.vue
new file mode 100644
index 0000000..7d50f2f
--- /dev/null
+++ b/src/components/PostularTema.vue
@@ -0,0 +1,102 @@
+
+
+
+ -
+
- + + me gusta + +
- + + comentar + +
- + + compartir + +
+
+
+
+ Tu, Leah, Tony y otras 48 personas más
+
+
+
+
+
+
+ ![user]()
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ custom header
+
+
+
+ default body
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2517eb2..d6ee36a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,8 +1,9 @@
+
+
+
+
-
@@ -11,12 +12,14 @@
// @ is an alias to /src
import Charlas from '@/components/Charlas.vue'
import Header from '@/components/Header.vue'
+import Sidebar from '@/components/Sidebar.vue'
export default {
name: 'home',
components: {
Charlas,
- Header
+ Header,
+ Sidebar
}
}
@@ -37,5 +40,8 @@ ul {
.container {
margin: 15px 150px 15px 150px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
-