1// Copyright (C) 2023 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import m from 'mithril'; 16 17// GridLayout is a container that arranges elements into a two-column grid when 18// the screen is wide, and a single column when the screen is narrow. 19// Consider the following layout (where A, B, C, and D are arbitrary components) 20// m(GridLayout, A, B, C, D) 21// 22// On a wide screen we get: 23// ┌─────────┐ ┌─────────┐ 24// │ A │ │ B │ 25// │ │ └─────────┘ 26// │ │ 27// └─────────┘ 28// ┌─────────┐ ┌─────────┐ 29// │ C │ │ D │ 30// │ │ │ │ 31// │ │ └─────────┘ 32// └─────────┘ 33// 34// And on a narrow screen we get: 35// ┌─────┐ 36// │ A │ 37// │ │ 38// │ │ 39// └─────┘ 40// ┌─────┐ 41// │ B │ 42// └────-┘ 43// ┌─────┐ 44// │ C │ 45// │ │ 46// │ │ 47// └─────┘ 48// ┌─────┐ 49// │ D │ 50// │ │ 51// └─────┘ 52export class GridLayout implements m.ClassComponent { 53 view({children}: m.Vnode) { 54 return m('div.pf-grid-layout', children); 55 } 56} 57 58// ColumnLayouts can be used inside a GridLayout to group elements together 59// vertically and to acheive a more aesthetically pleasing vertical spacing of 60// elements in the same column. 61// Consider the same example from above but instead the elements are placed 62// inside columns. 63// m(GridLayout, m(Column, A, C), m(Column, B, D)) 64// 65// On a wide screen we get: 66// ┌─────────┐ ┌─────────┐ 67// │ A │ │ B │ 68// │ │ └─────────┘ 69// │ │ ┌─────────┐ <- This gap has disappeared 70// └─────────┘ │ D │ 71// ┌─────────┐ │ │ 72// │ C │ └─────────┘ 73// │ │ 74// │ │ 75// └─────────┘ 76// 77// And on a narrow screen we get: 78// ┌─────┐ 79// │ A │ 80// │ │ 81// │ │ 82// └─────┘ 83// ┌─────┐ 84// │ C │ 85// │ │ 86// │ │ 87// └─────┘ 88// ┌─────┐ 89// │ B │ 90// └────-┘ 91// ┌─────┐ 92// │ D │ 93// │ │ 94// └─────┘ 95// 96// The gap between column elements are the same size as the gaps in the grid 97// layout, so we get keep spacing between all elements in the grid. 98export class GridLayoutColumn implements m.ClassComponent { 99 view({children}: m.Vnode) { 100 return m('div.pf-grid-layout-column', children); 101 } 102} 103