Skip to content
Permalink
Browse files

estructura layout

  • Loading branch information...
alejandro mur
alejandro mur committed Jun 3, 2018
1 parent dfd2ca1 commit 31f6635b3b8435f3dc0076f6f54012b56d17e038

Some generated files are not rendered by default. Learn more.

@@ -25,10 +25,9 @@
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.6",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.7",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
@@ -41,8 +40,10 @@
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"postcss-media-variables": "^2.0.1",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
@@ -1,8 +1,27 @@
.album {
max-width: 600 / 16 * 1rem ;
max-width: 960 / 16 * 1rem ;
padding: 1rem;

@media screen and (min-width: 48em) {
display: flex;
}
}

.album__header {

img {
max-width: 20rem;
}

@media screen and (min-width: 48em) {
flex: 0 0 20rem;
}
}

.album__body {

@media screen and (min-width: 48em) {
flex: 1 1 auto;
padding-left: 1rem;
}
}
@@ -1,18 +1,18 @@
export class AlbumModel {
id: number,
id: number;
title: string;
path: string,
picture: string,
city?: string,
path: string;
picture: string;
city?: string;
year: Date;
artist: string;
players: string[];
instruments: string[],
instruments: string[];
tracklistSideA: number[];
tracklistSideB: number[];
tracklistDurationSideA: number[],
tracklistDurationSideB: number[],
tracklistDurationSideA: number[];
tracklistDurationSideB: number[];
gift: string;
date: Date;
comments: string
comments: string;
}
@@ -1,3 +1,161 @@
<aside>
ASIDE NAV
<ul>
<li>
<a href="#listado">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g>
<path d="m31.9,125.9h73.8v-73.7h-73.8v73.7h-7.10543e-15zm84.1,20.9h-94.6c-5.8,0-10.4-4.7-10.4-10.4v-94.7c0-5.8 4.7-10.4 10.4-10.4h94.6c5.8,0 10.4,4.7 10.4,10.4v94.6c0.1,5.8-4.6,10.5-10.4,10.5z"
/>
<path d="m490.6,99.5h-324.5c-5.8,0-10.4-4.7-10.4-10.4 0-5.8 4.7-10.4 10.4-10.4h324.5c5.8,0 10.4,4.7 10.4,10.4 0,5.7-4.7,10.4-10.4,10.4z"
/>
<path d="m31.9,292.9h73.8v-73.8h-73.8v73.8h-7.10543e-15zm84.1,20.8h-94.6c-5.8,0-10.4-4.7-10.4-10.4v-94.6c0-5.8 4.7-10.4 10.4-10.4h94.6c5.8,0 10.4,4.7 10.4,10.4v94.6c0.1,5.8-4.6,10.4-10.4,10.4z"
/>
<path d="m490.6,266.4h-324.5c-5.8,0-10.4-4.7-10.4-10.4 0-5.8 4.7-10.4 10.4-10.4h324.5c5.8,0 10.4,4.7 10.4,10.4 0,5.8-4.7,10.4-10.4,10.4z"
/>
<path d="m31.9,459.8h73.8v-73.8h-73.8v73.8h-7.10543e-15zm84.1,20.9h-94.6c-5.8,0-10.4-4.7-10.4-10.4v-94.6c0-5.8 4.7-10.4 10.4-10.4h94.6c5.8,0 10.4,4.7 10.4,10.4v94.6c0.1,5.7-4.6,10.4-10.4,10.4z"
/>
<path d="m490.6,433.4h-324.5c-5.8,0-10.4-4.7-10.4-10.4s4.7-10.4 10.4-10.4h324.5c5.8,0 10.4,4.7 10.4,10.4s-4.7,10.4-10.4,10.4z"
/>
</g>
</svg>
</a>
</li>
<!-- <li>
<a href="#item2">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33">
<path d="M27.649,33h-7.216c-0.276,0-0.5-0.224-0.5-0.5V22.32h-6.867V32.5c0,0.276-0.224,0.5-0.5,0.5H5.348
c-0.276,0-0.5-0.224-0.5-0.5V15.893H0.73c-0.205,0-0.389-0.125-0.465-0.315c-0.075-0.19-0.027-0.407,0.121-0.548L16.154,0.137
c0.193-0.183,0.494-0.182,0.688,0l15.772,14.893c0.148,0.141,0.196,0.358,0.121,0.548c-0.076,0.19-0.26,0.315-0.465,0.315h-4.121
V32.5C28.149,32.776,27.925,33,27.649,33z M20.933,32h6.216V15.393c0-0.276,0.224-0.5,0.5-0.5h3.363L16.498,1.188L1.988,14.893h3.36
c0.276,0,0.5,0.224,0.5,0.5V32h6.218V21.82c0-0.276,0.224-0.5,0.5-0.5h7.867c0.276,0,0.5,0.224,0.5,0.5V32z" />
</svg>
</a>
</li> -->
<li>
<a href="#item3">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.205 33.205">
<g>
<path d="M27.823,33.205H5.38c-0.276,0-0.5-0.224-0.5-0.5V15.488c0-0.276,0.224-0.5,0.5-0.5h22.443c0.276,0,0.5,0.224,0.5,0.5
v17.217C28.323,32.982,28.1,33.205,27.823,33.205z M5.88,32.205h21.443V15.988H5.88V32.205z" />
<path d="M32.474,15.988H0.732c-0.205,0-0.389-0.125-0.465-0.315c-0.075-0.19-0.027-0.407,0.121-0.548L16.257,0.137
c0.193-0.183,0.494-0.182,0.688,0l15.873,14.988c0.148,0.141,0.196,0.358,0.121,0.548C32.862,15.863,32.679,15.988,32.474,15.988z
M1.989,14.988h29.227L16.601,1.188L1.989,14.988z" />
<path d="M20.562,33.205h-7.918c-0.276,0-0.5-0.224-0.5-0.5V21.957c0-0.276,0.224-0.5,0.5-0.5h7.918c0.276,0,0.5,0.224,0.5,0.5
v10.748C21.062,32.982,20.838,33.205,20.562,33.205z M13.144,32.205h6.918v-9.748h-6.918V32.205z" />
<path d="M27.823,11.553c-0.276,0-0.5-0.224-0.5-0.5V4.936c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v6.117
C28.323,11.329,28.1,11.553,27.823,11.553z" />
</g>
</svg>
</a>
</li>
<li>
<a href="#">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 511.999">
<g>
<path d="M34.988,140.098c1.76,0,3.528-0.616,4.953-1.871c6.857-6.038,14.685-10.694,23.265-13.836
c3.89-1.425,5.887-5.731,4.463-9.621c-1.424-3.89-5.732-5.887-9.621-4.464c-10.333,3.785-19.76,9.391-28.019,16.663
c-3.109,2.737-3.41,7.476-0.672,10.585C30.839,139.238,32.909,140.098,34.988,140.098z" />
<path d="M510.785,184.633c-2.959-8.131-10.461-13.079-19.093-12.626h-0.001l-297.235,15.836
c-6.885,0.366-12.795,4.812-15.056,11.327c-2.261,6.514-0.376,13.665,4.802,18.217l66.545,58.52
c0.84,0.739,1.461,1.659,1.835,2.669c0.004,0.01,0.006,0.021,0.01,0.031c0.003,0.009,0.008,0.016,0.011,0.024
c0.365,1.016,0.481,2.122,0.312,3.23l-13.361,87.603c-1.04,6.815,2.112,13.505,8.031,17.042c2.692,1.608,5.686,2.404,8.67,2.404
c3.578,0,7.14-1.145,10.145-3.404l20.354-15.31l5.83,16.018c2.939,8.069,9.726,13.86,18.157,15.488
c1.565,0.302,3.13,0.45,4.678,0.45c6.796,0,13.272-2.854,17.938-8.062l162.151-180.92l8.766-6.593
C511.189,201.377,513.745,192.763,510.785,184.633z M322.19,384.081c-2.214,2.468-5.347,3.523-8.604,2.896
c-3.256-0.629-5.773-2.776-6.907-5.892l-7.393-20.314l134.411-101.103L322.19,384.081z M285.829,352.123
c-0.021,0.016-0.042,0.031-0.062,0.047l-28.382,21.349c-0.674,0.507-1.381,0.546-2.106,0.112
c-0.723-0.433-1.025-1.073-0.898-1.906l13.361-87.605c0.16-1.048,0.233-2.095,0.241-3.134l49.292-17.941
c3.892-1.417,5.898-5.72,4.482-9.612c-1.416-3.892-5.717-5.897-9.612-4.482l-49.292,17.94c-0.674-0.792-1.404-1.547-2.2-2.247
l-66.546-58.521c-0.632-0.556-0.813-1.241-0.537-2.036c0.276-0.796,0.843-1.223,1.685-1.268l285.413-15.206l-134.431,48.929
c-3.892,1.417-5.898,5.72-4.482,9.612c1.108,3.045,3.984,4.935,7.048,4.935c0.852,0,1.718-0.146,2.565-0.454l134.43-48.928
L285.829,352.123z" />
<path d="M206.424,286.956l-43.768,16.029c-22.738,8.327-47.357,7.302-69.324-2.888c-9.097-4.22-16.954-10.304-23.164-17.807
l6.442,2.988c14.501,6.727,30.757,7.404,45.77,1.907c15.453-5.659,27.607-17.077,34.224-32.15
c6.614-15.064,6.783-31.755,0.477-46.994c-5.63-13.607-16.11-24.627-29.51-31.031c-13.407-6.406-28.564-7.631-42.68-3.451
c-16.533,4.898-30.162,16.646-37.393,32.234c-6.338,13.665-8.721,28.474-7.091,43.07c-9.341-8.056-16.527-18.399-20.887-30.302
c-6.743-18.411-5.912-38.346,2.339-56.133c1.743-3.758,0.11-8.216-3.647-9.959c-3.759-1.743-8.215-0.11-9.959,3.648
c-9.936,21.422-10.937,45.429-2.816,67.603c7.452,20.348,21.765,36.913,40.625,47.183c7.791,18.989,22.233,34.114,40.957,42.8
c14.154,6.564,29.248,9.865,44.398,9.865c12.254,0,24.545-2.16,36.394-6.499l43.768-16.029c3.89-1.425,5.887-5.731,4.463-9.621
C214.621,287.53,210.313,285.532,206.424,286.956z M58.096,260.157c-5.091-15.878-4.049-32.836,3.01-48.051
c5.418-11.684,15.641-20.49,28.046-24.164c21.673-6.419,45.42,4.93,54.071,25.835c4.729,11.43,4.604,23.94-0.352,35.23
c-4.959,11.297-14.069,19.853-25.648,24.094c-11.251,4.121-23.432,3.613-34.301-1.429L58.096,260.157z" />
</g>
</svg>
</a>
</li>
<li>
<a href="#">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256,293.168c-4.428,0-8.017,3.589-8.017,8.017v30.124c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017
v-30.124C264.017,296.757,260.428,293.168,256,293.168z" />
<path d="M256,172.674c-4.428,0-8.017,3.589-8.017,8.017v30.124c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017
v-30.124C264.017,176.264,260.428,172.674,256,172.674z" />
<path d="M256,353.415c-4.428,0-8.017,3.589-8.017,8.017v30.124c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017
v-30.124C264.017,357.004,260.428,353.415,256,353.415z" />
<path d="M256,112.427c-4.428,0-8.017,3.589-8.017,8.017v30.124c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017
v-30.124C264.017,116.017,260.428,112.427,256,112.427z" />
<path d="M150.568,247.983h-30.124c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h30.124
c4.428,0,8.017-3.589,8.017-8.017S154.996,247.983,150.568,247.983z" />
<path d="M210.815,247.983H180.69c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h30.125
c4.428,0,8.017-3.589,8.017-8.017S215.243,247.983,210.815,247.983z" />
<path d="M271.062,247.983h-7.045v-7.045c0-4.427-3.588-8.017-8.017-8.017c-4.428,0-8.017,3.589-8.017,8.017v7.045h-7.045
c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h7.045v7.045c0,4.427,3.588,8.017,8.017,8.017
c4.428,0,8.017-3.589,8.017-8.017v-7.045h7.045c4.428,0,8.017-3.589,8.017-8.017S275.489,247.983,271.062,247.983z"
/>
<path d="M391.555,247.983H361.43c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h30.125
c4.428,0,8.017-3.589,8.017-8.017S395.983,247.983,391.555,247.983z" />
<path d="M331.308,247.983h-30.124c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h30.124
c4.428,0,8.017-3.589,8.017-8.017S335.736,247.983,331.308,247.983z" />
<path d="M439.85,66.271H72.15c-4.428,0-8.017,3.589-8.017,8.017v363.424c0,4.427,3.588,8.017,8.017,8.017H439.85
c4.428,0,8.017-3.589,8.017-8.017V74.288C447.866,69.861,444.278,66.271,439.85,66.271z M431.833,247.983h-10.154
c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h10.154v165.678H264.017v-8.017c0-4.427-3.588-8.017-8.017-8.017
c-4.428,0-8.017,3.589-8.017,8.017v8.017H80.167V264.017h10.155c4.428,0,8.017-3.589,8.017-8.017s-3.588-8.017-8.017-8.017H80.167
V82.305h167.816v8.017c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017v-8.017h167.816V247.983z"
/>
<path d="M439.85,6.413c-4.428,0-8.017,3.589-8.017,8.017v34.205c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017
V14.43C447.866,10.003,444.278,6.413,439.85,6.413z" />
<path d="M503.983,66.271h-34.205c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h34.205
c4.428,0,8.017-3.589,8.017-8.017S508.412,66.271,503.983,66.271z" />
<path d="M72.15,6.413c-4.428,0-8.017,3.589-8.017,8.017v34.205c0,4.427,3.588,8.017,8.017,8.017c4.428,0,8.017-3.589,8.017-8.017
V14.43C80.167,10.003,76.579,6.413,72.15,6.413z" />
<path d="M42.221,66.271H8.017C3.588,66.271,0,69.861,0,74.288s3.588,8.017,8.017,8.017h34.205c4.428,0,8.017-3.589,8.017-8.017
S46.65,66.271,42.221,66.271z" />
<path d="M439.85,455.349c-4.428,0-8.017,3.589-8.017,8.017v34.205c0,4.427,3.588,8.017,8.017,8.017
c4.428,0,8.017-3.589,8.017-8.017v-34.205C447.866,458.938,444.278,455.349,439.85,455.349z" />
<path d="M503.983,429.695h-34.205c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h34.205
c4.428,0,8.017-3.589,8.017-8.017S508.412,429.695,503.983,429.695z" />
<path d="M72.15,455.349c-4.428,0-8.017,3.589-8.017,8.017v34.205c0,4.427,3.588,8.017,8.017,8.017
c4.428,0,8.017-3.589,8.017-8.017v-34.205C80.167,458.938,76.579,455.349,72.15,455.349z" />
<path d="M42.221,429.695H8.017c-4.428,0-8.017,3.589-8.017,8.017s3.588,8.017,8.017,8.017h34.205c4.428,0,8.017-3.589,8.017-8.017
S46.65,429.695,42.221,429.695z" />
</svg>

</a>
</li>
<!-- <li>
<a href="#">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59 c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59 c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0 L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"
/>
</svg>
</a>
</li> -->
<!-- <li>
<a href="#">
<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59">
<g>
<path d="M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z" />
<path d="M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z" />
<path d="M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z" />
<path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289
C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59
h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681
C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553
C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364
c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z" />
</g>
</svg>
</a>
</li> -->
</ul>
</aside>
@@ -1,4 +1,34 @@
aside {
height: 100%;
background: var(--primary-color);
background: var(--secondary-lighten-color);
}

ul {
display: flex;
flex-direction: row;

@media screen and (min-width: 48em) {
display: block;
}
}

a {
display: flex;
padding: 1rem 1.5rem;
border: 1px solid var(--primary-darken);
color: var(--secondary-color);
background-color: var(--secondary-lighten-color);
text-decoration: none;
transition: all 200ms ease;

&:hover,
&:focus {
color: var(--primary-color);
background-color: var(--secondary-darken-color);
}

svg,
path {
fill: currentColor;
}
}
@@ -1,3 +1,3 @@
<h1>
<a href="/" title="Inicio">
{{ title }}
</h1>
</a>
@@ -1,10 +1,34 @@
// :root {
// --dev: #f06;
// }

h1 {
a {
display: inline;
margin-top: 0;
margin-bottom: 0;
font-size: 2rem;
color: var(--secondary-lighten-color);
text-align: center;
text-decoration: none;
position: relative;
z-index: 1;

&::after {
content: '';
display: block;
width: 100%;
height: 80%;
background-color: var(--primary-color);
position: absolute;
top: 0.25rem;
left: 0;
z-index: -1;
transform: rotate(-2deg);
will-change: width, background-color;
transition: all 300ms ease;
opacity: 0.4;
clip-path: polygon(100% 0, 100% 85%, 75% 100%, 0 80%, 0 0);
}

&:hover,
&:focus {
&::after {
clip-path: polygon(100% 0, 95% 80%, 50% 100%, 0 100%, 0 0);
}
}
}
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
title = 'Mis discos'
title = 'my-collection'
}
@@ -1,3 +1,3 @@
<section>
<collection-album *ngFor="let a of album" [album]="album"></collection-album>
<collection-album [album]="album"></collection-album>
</section>
@@ -1,4 +1,4 @@
section {
height: 100%;
background: turquoise;
background-color: #f1f4f5;
}

0 comments on commit 31f6635

Please sign in to comment.
You can’t perform that action at this time.