Change results snippet layout

[spiros]

Currently the snippet is like this (MW 1.31)

compos

com-pŏs: (conp-), pŏtis, adj. potis, I having the mastery, control, or power over a thing, master of, partaking of, possessing, participating or sharing

6 KB (891 words) - 12:19, 15 August 2017

How could it be changed in a two column table format (applying a style to the list items) and get rid of the date/size info line?

compos

com-pŏs: (conp-), pŏtis, adj. potis, I having the mastery, control, or power over a thing, master of, partaking of, possessing, participating or sharing

I have tried some css changes, got rid of the unwanted metadata bit (size/date), but when page is resized, some text from the right "column" moves to the left one.

.mw-search-results li {
    columns: 2;
    border-bottom: 1px dotted #555;
    padding: 5px 0;
}

.mw-search-result-data {
    display: none;
}

.mw-search-results {
    /* max-width: 38em; */
}

 

Above, quoted only the part of the css I edited.

For example this is what I want to be maintained in different screen sizes: https://imgur.com/bGrtm1H but when it gets smaller; this is what I get now with some screen sizes/changes of zoom https://imgur.com/YQAzMNH

Edited January 28, 2019 by spiros (see edit history)

[Skizzerz]

.mw-search-result-data {
  display: none;
}

.mw-search-result {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.mw-search-result-heading {
  border: 1px solid black;
  padding: 0.5rem;
  width: 25%;
}

.searchresult {
  border: 1px solid black;
  padding: 0.5rem;
  width: 75%;
}

You may find the above to be useful as a starting point. This is still missing a couple of things, such as sizing on mobile screens (you'll need to add some @media queries to break on screen size and provide relevant CSS for smaller devices -- the flexbox layout will let you easily collapse it back into multiple rows with the heading on one row and the result underneath rather than side-by-side)

[spiros]

Thank you! I added that in Common.css and the output I get is the attached. Instead of the desired which is like https://imgur.com/bGrtm1H

[FeRDNYC]

@spiros Not sure if you're still looking for this, but the following should get you close to the formatting in your OP:

ul.mw-search-results {
    max-width: unset;
}

ul.mw-search-results li {
    display: flex;
    flex-flow: row wrap;
    border: 0.1rem solid black;
    justify-content: stretch;
    padding-bottom: 0;
    margin-bottom: 0.2rem;
    align-content: stretch;
}

.mw-search-result-heading {
    flex: 1 0 10rem;
    padding: 0.2rem;
    /* Sets the left-column blocks' VERTICAL alignment within the row */
    align-self: center;
}

.searchresult {
    flex: 1 1 20rem;
    padding: 0.2rem;
    border-left: 1px solid black;
}

.mw-search-result-data { display: none; }

If you'd prefer something more like your last imgur link, you'd want to...

1. change border: to border-bottom: in the second block
2. remove align-self: center; from .mw-search-result-heading
3. remove border-left from .searchresult

The balance between the two columns can be tweaked by editing the two flex: properties. See this guide for a good one-page overview of flexbox. As configured, the left column will always be at least 10rem wide but can expand if there's additional space, while the right column is initially 20rem wide and will grow or shrink as needed (growing in equal proportion to the left column).

If the available width is less than their combined 30rem (like on many mobile devices), the two columns will automatically shift to stack one above the other (no media queries required!) To disable the stacking so they'll keep shrinking side-by-side instead, you'd change the second block's flex-flow from row wrap to row nowrap.