Skip to content

Commit 243863a

Browse files
AraozuAraozu
committed
Mejorar estilos de la barra lateral de la documentacion
1 parent bc8e511 commit 243863a

File tree

5 files changed

+91
-65
lines changed

5 files changed

+91
-65
lines changed

‎src/components/docs/barra-lateral.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ div.barra-doc
99
div(v-if="!versionActualExiste")
1010
p No existe esta versión de la documentación, por favor escoge otra.
1111

12+
div.separador-barra-lateral
13+
1214
elemento-barra(v-for="(tema, i) in datos.temas"
1315
:key="i"
1416
:tema="tema"
@@ -87,10 +89,16 @@ export default
8789
8890
.cont-opcion-version
8991
padding: 0.75rem 0.5rem
92+
font-family: "Source Sans Pro", Roboto, sans-serif
9093
9194
span
9295
display: inline-block
9396
padding-bottom: 0.5rem
9497
98+
.separador-barra-lateral
99+
width: 100%
100+
height: 3px
101+
background-color: var(--colorSecundario)
102+
95103
//
96104
</style>

‎src/components/docs/elemento-barra.vue‎

Lines changed: 68 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template lang="pug">
22
div.elemento-barra
3-
div.elemento(:class="clases")
4-
router-link(:to="rutaActual")
5-
| {{ tema.titulo }}
3+
router-link.link-barra(:to="rutaActual" :class="clases" :style="paddingIzq")
4+
| {{ tema.titulo }}
65
div.inner(v-if="tema.temas")
76
elemento-barra(v-for="(subtema, i) in tema.temas"
87
:key="i"
@@ -12,67 +11,84 @@ div.elemento-barra
1211
:nivel="nivel + 1"
1312
:fragmentosUrl="fragmentosUrl")
1413

14+
//
1515
</template>
1616

1717
<script lang="coffee">
18-
import { computed } from "vue"
19-
20-
export default
21-
name: "elemento-barra"
22-
props:
23-
tema:
24-
type: Object
25-
required: true
26-
ruta:
27-
type: String
28-
required: true
29-
padreActivo:
30-
type: Boolean
31-
required: true
32-
nivel:
33-
type: Number
34-
required: true
35-
fragmentosUrl:
36-
type: Array
37-
required: true
38-
setup: (props) =>
39-
rutaActual = computed (=> props.ruta + props.tema.ruta + "/" )
40-
esRutaActiva = computed (=>
41-
if props.padreActivo
42-
rutaActual = props.fragmentosUrl[props.nivel] ? ""
43-
(rutaActual isnt "") and (props.tema.ruta is rutaActual)
44-
else false
45-
)
46-
clases = computed (=>
47-
if esRutaActiva.value then ["elemento-activo-barra-docs"]
48-
else []
49-
)
50-
51-
{
52-
rutaActual
53-
esRutaActiva
54-
clases
55-
}
18+
import {computed} from "vue"
19+
20+
export default
21+
name: "elemento-barra"
22+
props:
23+
tema:
24+
type: Object
25+
required: true
26+
ruta:
27+
type: String
28+
required: true
29+
padreActivo:
30+
type: Boolean
31+
required: true
32+
nivel:
33+
type: Number
34+
required: true
35+
fragmentosUrl:
36+
type: Array
37+
required: true
38+
setup: (props) =>
39+
rutaActual = computed (=> props.ruta + props.tema.ruta + "/")
40+
esRutaActiva = computed (=>
41+
if props.padreActivo
42+
rutaActual = props.fragmentosUrl[props.nivel] ? ""
43+
(rutaActual isnt "") and (props.tema.ruta is rutaActual)
44+
else false
45+
)
46+
clases = computed (=>
47+
if esRutaActiva.value then ["elemento-activo-barra-docs"] else []
48+
)
49+
paddingIzq = computed (=>
50+
{paddingLeft: (0.5 + (props.nivel * 0.75)) + "rem"}
51+
)
52+
53+
{
54+
rutaActual
55+
esRutaActiva
56+
clases
57+
paddingIzq
58+
}
5659
5760
5861
#
5962
</script>
6063

6164
<style scoped lang="sass">
6265
63-
.inner
64-
padding-left: 1rem
66+
.inner
67+
// padding-left: 1rem
68+
69+
70+
.link-barra
71+
display: inline-block
72+
width: 100%
73+
padding: 0.5rem 0.15rem 0.5rem 0
74+
color: var(--color)
75+
text-decoration: none
76+
box-sizing: border-box
77+
78+
&:hover
79+
background-color: var(--color-t-transparente)
80+
81+
.elemento
82+
padding: 0.5rem 0.25rem 0.5rem 0.5rem
83+
84+
a
85+
text-decoration: none
86+
color: var(--color)
6587
6688
67-
.elemento
68-
margin: 0.75rem 0.5rem
69-
a
70-
text-decoration: none
71-
color: var(--color)
7289
73-
.elemento-activo-barra-docs
74-
a
75-
color: var(--colorSecundario) !important
76-
font-weight: bold
90+
.elemento-activo-barra-docs
91+
color: var(--colorSecundario) !important
92+
font-weight: 600
7793
7894
</style>

‎src/components/docs/repl-docs.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,10 @@ export default
125125
background-color: var(--color-a)
126126
127127
.boton-repl-rojo
128-
color: var(--colorSecundario)
128+
color: var(--color-m)
129129
130130
&:hover
131-
background-color: var(--colorSecundario)
131+
background-color: var(--color-m)
132132
133133
134134
.resultado-repl-docs
@@ -137,15 +137,15 @@ export default
137137
138138
.cont-botones
139139
height: 2.8rem
140-
border-top: solid 0.2rem var(--colorSecundario)
141-
border-bottom: solid 0.2rem var(--colorSecundario)
140+
border-top: solid 0.2rem var(--color-m)
141+
border-bottom: solid 0.2rem var(--color-m)
142142
143143
144144
.cont-botones-borde-ejecutar
145145
border-color: var(--color-a)
146146
147147
.cont-botones-borde-compilar
148-
border-color: var(--colorSecundario)
148+
border-color: var(--color-m)
149149
150150
151151
.resultado-repl-docs

‎src/sass/global.sass‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
--color-t: #fca8d1
1818
--color-a: #39B487
1919

20+
--color-t-transparente: rgba(252, 168, 209, 0.35)
21+
2022

2123
html, body
2224
font-family: var(--fuenteNormal)
@@ -123,11 +125,11 @@ code
123125
124126

125127
.Fondo-alt-err
126-
border: solid 2px var(--color-borde-error)
128+
border: solid 2px var(--colorSecundario)
127129

128130

129131
.Fondo-alt-ok
130-
border: solid 2px var(--color-borde-exito)
132+
border: solid 2px var(--color-a)
131133

132134

133135
.LineaCodigo

‎src/views/Docs.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,18 @@ export default
3434
.contenedor-docs
3535
display: grid
3636
height: 100%
37-
grid-template-columns: 17.5rem auto 35%
37+
grid-template-columns: 14rem auto 35%
3838
39-
@media only screen and (max-width: 1100px)
39+
@media only screen and (max-width: 1400px)
4040
.contenedor-docs
41-
grid-template-columns: 15% auto 40%
41+
grid-template-columns: 11rem auto 30%
4242
43-
@media only screen and (max-width: 800px)
43+
@media only screen and (max-width: 1000px)
4444
.contenedor-docs
45-
grid-template-columns: 15% auto 30%
45+
grid-template-columns: 8rem auto 0
4646
4747
48-
@media only screen and (max-width: 700px)
48+
@media only screen and (max-width: 800px)
4949
.contenedor-docs
5050
grid-template-columns: 9rem auto 0
5151

0 commit comments

Comments
 (0)