Change Details

**Motivation** **Acceptance Criteria** **Random notes** The minerva skin break points are: < 720px 16px margin left and right and >= 720px 3,35em (=54px at default font size) margin left and right and >= 1000px centered width: 90% (of the total viewport) max-width of 993.3px This means old ones will also be modified.

**Motivation** As a user I would like to have a pleasant experience of the termbox throughtout different devices and screen sizes. I would like to be able to to scan the text easily and do not loose track of lines of text. **Acceptance Criteria** [] the termbox is build into the minerva skin (no hacks) [] the defined termbox columns (content, margin, interaction column) scale as defined [] the columns don't get narrower as defined [] the columns don't get wider as defined [] the content column breaks as defined **Specifications** (mocks for detailed view – [[ https://www.figma.com/file/g86G4bYOcUoIPwEbN041nq/180607_Termbox-Mobile-Sprint?node-id=0%3A1 | Figma file ]]) 1st Breakpoint: 340 – 719 px “Content column” is the only scaling until 420 px wide - IxD (Interaction) column is scaling up to 64 px - margin scales up until the next breakpoint is reached 2nd Breakpoint: 720 – 951 px (not a real breakpoint from our view, but from the minerva skin) - Padding of Minerva expands to 54 px - the margin (blue) therefor shrinks - content and IxD-area remain the same width as before 3rd Breakpoint: 952 – 1095 px - Content becomes 3 columns - column scale from 244 to 290 px - languages caption stays on top of the label - Margins scale down to 16 px - “Interaction section” (red, right) remains 64 px - padding (blue) scales down to 16 px - “In more languages” and “All entered languages” will be centered in the first column 4th Breakpoint: 1096 – infinite px - Content becomes 4 columns - languages column is fixed by 128 px - other columns are always 244 px - Margin scales down to 16 px - “Interaction section” (red, right) remains 64 px - padding is defined by Minerva - “In more languages” and “All entered languages” will be centered in the second column - only the far right margin will grow **Random notes** The minerva skin break points are: < 720px 16px margin left and right and >= 720px 3,35em (=54px at default font size) margin left and right and >= 1000px centered width: 90% (of the total viewport) max-width of 993.3px This means old ones will also be modified.

**Motivation** As a user I would like to have a pleasant experience of the termbox throughtout different devices and screen sizes. I would like to be able to to scan the text easily and do not loose track of lines of text. **Acceptance Criteria** [] the termbox is build into the minerva skin (no hacks) [] the defined termbox columns (content, margin, interaction column) scale as defined [] the columns don't get narrower as defined [] the columns don't get wider as defined [] the content column breaks as defined **Specifications** (mocks for detailed view – [[ https://www.figma.com/file/g86G4bYOcUoIPwEbN041nq/180607_Termbox-Mobile-Sprint?node-id=0%3A1 | Figma file ]]) 1st Breakpoint: 340 – 719 px “Content column” is the only scaling until 420 px wide - IxD (Interaction) column is scaling up to 64 px - margin scales up until the next breakpoint is reached 2nd Breakpoint: 720 – 951 px (not a real breakpoint from our view, but from the minerva skin) - Padding of Minerva expands to 54 px - the margin (blue) therefor shrinks - content and IxD-area remain the same width as before 3rd Breakpoint: 952 – 1095 px - Content becomes 3 columns - column scale from 244 to 290 px - languages caption stays on top of the label - Margins scale down to 16 px - “Interaction section” (red, right) remains 64 px - padding (blue) scales down to 16 px - “In more languages” and “All entered languages” will be centered in the first column 4th Breakpoint: 1096 – infinite px - Content becomes 4 columns - languages column is fixed by 128 px - other columns are always 244 px - Margin scales down to 16 px - “Interaction section” (red, right) remains 64 px - padding is defined by Minerva - “In more languages” and “All entered languages” will be centered in the second column - only the far right margin will grow **Random notes** The minerva skin break points are: < 720px 16px margin left and right and >= 720px 3,35em (=54px at default font size) margin left and right and >= 1000px centered width: 90% (of the total viewport) max-width of 993.3px This means old ones will also be modified.