DCK CADD Wiki Write-Up

From DelDOT CADD Wiki

Revision as of 08:53, 9 June 2021 by Mbalbierer (talk | contribs)

This is a write up of what I learned with creating a guideline on the CADD Wiki:

  1. Use Notepad++ and set language to HTML.
* This helps view and edit the code by highlighting start/end tags, code folding, etc.
* Make this the original. Everytime the wikipage needs to be updated select all, copy and paste into the wikipage overwriting everything. (ctrl+s ; ctrl+a ; ctrl+c)
  1. 2. Turn off auto numbering on the ToC and manually number everything.
  • This was done so I could have [1.2.3.4] style numbering.
  • I tried using ol’s and li’s first. Took some doing but figured out how to get the numbering to work (had to use counters in CSS). This caused more problems then it solved mainly due to how it interacted with the ToC and using the header tags.

Cant have a start tag inside of a not-ended tag:

  • Title
  • And no, you can’t switch the

  • and

    start tags. It breaks it. c. Add a div to the top of the page (in this case I named it noautonum) to turn off the autonumber feature. Then manually number everything.

    .noautonum .tocnumber { display: none; }

    3. For the numbering of items, I wanted to test a having each step numbered uniquely in a hierarchy. This accomplishes two things: a. If a user says something doesn’t exist in the training, or asks how to do something that I cover in the training, this gives me a way to uniquely refer a user to a specific step. b. Since the Wiki isn’t conducive to taking notes, this allows the user to uniquely reference any step. This being a proof of concept, I wanted to lean into the numbering system. Probably went overboard tho. Step # 5.4.1.3.4 might have been a little deep. Will probably limit to 3 levels. 4. To make the ToC float, I added a cFloat class to the div wrapper containing the magic word.

    .cFloat { position: fixed; right: 0; top: 6em; z-index: 1; /*This keeps the ToC above the Circles.*/ max-width: 700px; }

    5. There was an issue where the ToC would be cut off if the screen was too small (ie on a laptop screen) and since it was set to float on the page, you couldn’t scroll down to see anymore of it. I added a check to the screen size and added in overflow scrolling. @media only screen and (max-height: 800px) { /*This will add scroll bars to the TOC based on the visible height of the window.*/

     .cFloat {
      height: 85%;
     }
     .toc {
      display: block;
      height: 100%;
      overflow: scroll;
     }
    

    }

    So, the above worked, but presented an issue where it worked when it was collapsed too, which is a problem. So, in the process of writing this thing up actually (4th wall break?) I came up with a solution: @media only screen and (max-height: 800px) { .toctogglecheckbox:not(:checked) ~ ul {

      display: block;
      height:70vh;
      overflow: scroll;
    

    } }

    In CSS, you cannot get to a parent from a child. Because of the way MediaWiki organized the ToC, the togglebox is a child of the ToC container. So there is no way to modify the container if the togglebox is checked. If you’re thinking, “Well I’ll just use JS!!”, you’d be wrong. MediaWiki disabled onclick. I couldn’t easily find another way trigger the code when the togglebox is clicked…

    I got around this issue by effecting the UL and not the container. So by putting in a check for the togglebox and then checking for UL as a sibling ( ~ ) of the togglebox, I am able to edit the UL. Now, when the togglebox is checked, my code doesn’t run [ :not(:checked) is the opposite of :checked ] and the native CSS runs.

    6. I added ToolTips in as a way to provide Tips, Alternatives, etc… Basically wanted a way to provide extra data, that isn’t necessary to complete the process. If a user never moused over one and didn’t realize this existed, it wouldn’t hurt them.

    I watched a few peoples initial reaction to the Wiki Guideline. I did see that they didn’t notice what they were at first. One person was scrolling around the page and made it about halfway down before accidently mousing over one. Once they realized what it was, they scrolled back to the top to look at the first one.

           1
           TOOLTIP TEXT
    

    /*This will create a circle around the item.*/ .justthetip {

     height: 25px;
     width: 25px;
     background-color: #13548e;
     border-radius: 50%;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     color: white;
     font-weight: bold;
    

    }

    .tooltip {

     position: relative;
     display: inline-block;
    

    }

    .tooltip .tooltiptext {

     visibility: hidden;
     
     /*I don't like that this is static, but I've got bigger fish to fry*/
     width: 300px;
     background-color: #13548e;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 10px;
    
     position: absolute;
     top: 120%;
     left: 50%;
     margin-left: -160px;
    

    }

    .tooltip .tooltiptext::after {

     content: "";
     position: absolute;
     bottom: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px 5px 5px 5px;
     border-style: solid;
     border-color: transparent transparent #004684 transparent;
    

    }

    .tooltip:hover .tooltiptext {

     visibility: visible;
    
     /*This causes the tooltip window to be on top of everything else, since it temporary.*/
     z-index: 10;
    

    }

    7. I turned off the ability to click on the images. A surprising number of people were confused by this.

    “What were you expecting to happen when you click on the image?” “IDK? If I can click on something, I click on it” 8. I had originally created links for each header to take the user back to the top of the page when clicked. Pretty easy to do. I removed it because it caused confusion: a. Same reason as above. If I can click on it, I will. b. When users were clicking on the titles, they expected something to happen and didn’t realize it was taking them back to the top because the first one they saw was #1, which is already at the top. I might add in a “Back to Top” link and float it at the bottom left of the screen…