Partialy handle small screen on add issue

This commit is contained in:
Adrian Woźniak 2020-08-22 21:51:32 +02:00
parent bf2ac75930
commit a382991cfd
4 changed files with 64 additions and 16 deletions

View File

@ -7,11 +7,19 @@
.dateTimeTooltip { .dateTimeTooltip {
padding: 15px; padding: 15px;
position: absolute; position: absolute;
top: -50px; top: 0;
width: 100%;
}
@media (max-width: 1100px) {
.dateTimeTooltip {
padding: 15px;
position: absolute;
top: -50px;
left: 110px; left: 110px;
width: 610px; width: 610px;
min-width: 610px; min-width: 610px;
max-width: 610px; max-width: 610px;
} }
.dateTimeTooltip:before { .dateTimeTooltip:before {
@ -27,6 +35,7 @@
z-index: -1; z-index: -1;
border-left: 1px solid rgba(9, 30, 66, 0.25); border-left: 1px solid rgba(9, 30, 66, 0.25);
border-bottom: 1px solid rgba(9, 30, 66, 0.25); border-bottom: 1px solid rgba(9, 30, 66, 0.25);
}
} }
.dateTimeTooltip > h2 { .dateTimeTooltip > h2 {

View File

@ -10,11 +10,6 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.modal > .clickableOverlay {
min-height: 100%;
background: rgba(9, 30, 66, 0.54);
}
.modal > .clickableOverlay.center { .modal > .clickableOverlay.center {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -22,6 +17,35 @@
padding: 50px; padding: 50px;
} }
@media (max-width: 1100px) {
.modal {
z-index: var(--modal);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal > .clickableOverlay {
min-height: 100%;
background: rgba(9, 30, 66, 0.54);
}
.modal > .clickableOverlay.center {
display: block;
padding: 0;
}
}
.modal > .clickableOverlay {
min-height: 100%;
background: rgba(9, 30, 66, 0.54);
}
.modal > .clickableOverlay > .styledModal { .modal > .clickableOverlay > .styledModal {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -77,6 +101,17 @@
color: var(--primary); color: var(--primary);
} }
.modal > .clickableOverlay > .styledModal.addIssue {
max-width: 800px;
}
@media (max-width: 1100px) {
.modal > .clickableOverlay > .styledModal.addIssue {
max-width: none;
width: auto;
}
}
.modal > .clickableOverlay > .styledModal.confirmModal { .modal > .clickableOverlay > .styledModal.confirmModal {
padding: 35px 40px 40px; padding: 35px 40px 40px;
} }

View File

@ -315,8 +315,8 @@ pub fn view(model: &Model, modal: &AddIssueModal) -> Node<Msg> {
let form = form.add_field(actions).build().into_node(); let form = form.add_field(actions).build().into_node();
StyledModal::build() StyledModal::build()
.width(800) .add_class("addIssue")
.add_class("add-issue") .width(0)
.variant(ModalVariant::Center) .variant(ModalVariant::Center)
.children(vec![form]) .children(vec![form])
.build() .build()

View File

@ -30,7 +30,7 @@ impl Variant {
#[derive(Debug)] #[derive(Debug)]
pub struct StyledModal { pub struct StyledModal {
variant: Variant, variant: Variant,
width: usize, width: Option<usize>,
with_icon: bool, with_icon: bool,
children: Vec<Node<Msg>>, children: Vec<Node<Msg>>,
class_list: Vec<String>, class_list: Vec<String>,
@ -93,7 +93,7 @@ impl StyledModalBuilder {
pub fn build(self) -> StyledModal { pub fn build(self) -> StyledModal {
StyledModal { StyledModal {
variant: self.variant.unwrap_or_else(|| Variant::Center), variant: self.variant.unwrap_or_else(|| Variant::Center),
width: self.width.unwrap_or_else(|| 130), width: self.width,
with_icon: self.with_icon.unwrap_or_default(), with_icon: self.with_icon.unwrap_or_default(),
children: self.children.unwrap_or_default(), children: self.children.unwrap_or_default(),
class_list: self.class_list, class_list: self.class_list,
@ -112,7 +112,7 @@ pub fn render(values: StyledModal) -> Node<Msg> {
let icon = if with_icon { let icon = if with_icon {
StyledIcon::build(Icon::Close) StyledIcon::build(Icon::Close)
.add_class(variant.to_icon_class_name().to_string()) .add_class(variant.to_icon_class_name())
.build() .build()
.into_node() .into_node()
} else { } else {
@ -127,9 +127,13 @@ pub fn render(values: StyledModal) -> Node<Msg> {
let clickable_class = format!("clickableOverlay {}", variant.to_class_name()); let clickable_class = format!("clickableOverlay {}", variant.to_class_name());
class_list.push(format!("styledModal {}", variant.to_class_name())); class_list.push(format!("styledModal {}", variant.to_class_name()));
let styled_modal_style = format!("max-width: {width}px", width = width); let styled_modal_style = match width {
Some(0) => "".to_string(),
Some(n) => format!("max-width: {width}px", width = n),
_ => format!("max-width: {width}px", width = 130),
};
div![ div![
attrs![At::Class => "modal"], C!["modal"],
div![ div![
attrs![At::Class => clickable_class], attrs![At::Class => clickable_class],
close_handler, close_handler,