Jump to content
  • 0

Change results snippet layout


spiros

Question

Currently the snippet is like this (MW 1.31)

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 by spiros (see edit history)
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
.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)

Link to comment
Share on other sites

  • 0

@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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.