Improve dynamic resizing of search and photo rail
This commit is contained in:
		
							parent
							
								
									9917a69dc5
								
							
						
					
					
						commit
						7d655c3dd5
					
				| 
						 | 
				
			
			@ -25,6 +25,7 @@ input[type="text"] {
 | 
			
		|||
.icon-button button {
 | 
			
		||||
    color: $accent;
 | 
			
		||||
    text-decoration: none;
 | 
			
		||||
    background: none;
 | 
			
		||||
    border: none;
 | 
			
		||||
    float: none;
 | 
			
		||||
    padding: unset;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -74,3 +74,23 @@
 | 
			
		|||
        transition: max-height 0.4s;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media(max-width: 600px) {
 | 
			
		||||
    .photo-rail-grid {
 | 
			
		||||
        grid-template-columns: repeat(6, 1fr);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #photo-rail-grid-toggle:checked ~ .photo-rail-grid {
 | 
			
		||||
        max-height: 300px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media(max-width: 450px) {
 | 
			
		||||
    .photo-rail-grid {
 | 
			
		||||
        grid-template-columns: repeat(4, 1fr);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #photo-rail-grid-toggle:checked ~ .photo-rail-grid {
 | 
			
		||||
        max-height: 450px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -42,6 +42,7 @@
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
.search-panel {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    max-height: 0;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    transition: max-height 0.4s;
 | 
			
		||||
| 
						 | 
				
			
			@ -78,6 +79,15 @@
 | 
			
		|||
    grid-column-gap: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.profile-tabs {
 | 
			
		||||
    @include search-resize(785px, 5, 185px);
 | 
			
		||||
    @include search-resize(725px, 4, 185px);
 | 
			
		||||
    @include search-resize(600px, 6, 140px);
 | 
			
		||||
    @include search-resize(530px, 5, 185px);
 | 
			
		||||
    @include search-resize(475px, 4, 185px);
 | 
			
		||||
    @include search-resize(406px, 3, 250px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@include search-resize(530px, 5, 185px);
 | 
			
		||||
@include search-resize(475px, 4, 185px);
 | 
			
		||||
@include search-resize(406px, 3, 250px);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -32,6 +32,7 @@
 | 
			
		|||
 | 
			
		||||
.card-title {
 | 
			
		||||
    @include ellipsis;
 | 
			
		||||
    white-space: unset;
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
    font-size: 1.15em;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue