jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Responsive sizing

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-08 15:10:45 -07:00
parent 63ceef41f7
commit b70d872859
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/elements/photo-thumbnail.html
View File

@ -11,7 +11,6 @@
<template> <template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"> <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
:host { :host {
@apply --photo-thumbnail;
display: inline-block; display: inline-block;
position: relative; position: relative;
background-color: #ccc; background-color: #ccc;
@ -25,6 +24,8 @@
box-sizing: border-box; box-sizing: border-box;
width: 200px; width: 200px;
height: 200px; height: 200px;
@apply --photo-thumbnail;
} }
:host > div { :host > div {

24
frontend/src/ketr-photos/ketr-photos.html
View File

@ -95,20 +95,13 @@
--paper-toast-color: white; --paper-toast-color: white;
} }
#thumbnails {
/* justify-content: space-between;*/
}
app-header { app-header {
background-color: yellow; background-color: yellow;
} }
/* app-header-layout { #thumbnails {
--layout-fit: { /* justify-content: space-between;*/
overflow-y: hidden !important;
};
} }
*/
.date-line { .date-line {
display: inline-block; display: inline-block;
@ -137,13 +130,24 @@
} }
.date-line { .date-line {
margin-left: 2em; /* margin-left: 2em;*/
} }
.date-line .header { .date-line .header {
padding: 0.25em 3px; padding: 0.25em 3px;
} }
@media (max-width: 800px) {
.date-line {
font-size: 8pt;
}
photo-thumbnail {
width: 25vw;
height: 25vw;
}
}
photo-thumbnail { photo-thumbnail {
--photo-thumbnail: { --photo-thumbnail: {
border: 3px solid white; border: 3px solid white;