Difference between revisions of "Scioly.org:Wiki Issues"

From Wiki - Scioly.org
Jump to: navigation, search
m (→‎Reports: Closing reports.)
(Added Left Vector Tab Pixel Lineup Issue)
Line 184: Line 184:
 
}
 
}
 
</pre>
 
</pre>
−
|browser=Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Chrome Version 74.0.3729.186
+
|browser=Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
 
|submitter=Nyda
 
|submitter=Nyda
 
|date=2020/08/05
 
|date=2020/08/05
Line 193: Line 193:
 
|submitter=bernard
 
|submitter=bernard
 
|date=2020/08/05
 
|date=2020/08/05
 +
}}
 +
 +
 +
{{Report
 +
|status=open
 +
|subject=Left Vector Tab Pixel Lineup
 +
|comment= Since Bernard complained about it, I might as well fix it. :P The following CSS code makes the left vector tabs flush with the section body. Please replace the old code with the following:
 +
<pre>
 +
@media (max-width: 980px) {
 +
    #left-navigation {
 +
        margin-left: 176px;
 +
    }
 +
}
 +
@media (max-width: 900px) {
 +
    #left-navigation {
 +
        margin-left: 81px;
 +
    }
 +
}
 +
@media (max-width: 600px) {
 +
    #left-navigation {
 +
        margin-left: -39px;
 +
    }
 +
}
 +
</pre>
 +
|browser=Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
 +
|submitter=Nyda
 +
|date=2020/08/06
 
}}
 
}}

Revision as of 06:34, 6 August 2020

Please use this page for reporting (using the template below) incorrect or unexpected behavior by the Wiki that is likely the result of code and therefore requires the attention of site administrators to repair. Reference Template:Report for parameter descriptions. 

{{Report
|status=
|subject=
|comment=
|pages=
|screenshots=
|device=
|operating_system=
|browser=
|submitter=
|date=
}}

Hard Refresh/Clearing Browser Cache

Web browsers store and access website data locally to decrease loading times, so the version of Scioly.org your browser displays may not show our latest updates. Before submitting a report, try hard refreshing the affected page to load its latest version and see if the problem persists. Instructions for hard refreshes or clearing browser caches are listed in the table below for several browsers and operating systems.

Web Browsers Operating Systems
Android iOS/iPadOS macOS Windows
Google Chrome Settings (Chrome) > History > Clear browsing data > Cached images and files > Clear data Shift + Click Reload
OR
Cmd + Shift + R		 Ctrl + Click Reload
OR
Ctrl + F5
OR
Ctrl + Shift + R
Internet Explorer Involves clearing cache for ALL apps: Settings > Storage > Internal storage > Cached data > OK N/A Ctrl + Click Reload
OR
Ctrl + F5
Microsoft Edge Settings (Edge) > Privacy > Clear browsing data > Cache > Clear browsing data > Clear
Mozilla Firefox Settings (Firefox) > Data Management > Website Data > Clear all Website Data Shift + Click Reload
OR
Cmd + Shift + R		 Ctrl + F5
OR
Ctrl + Shift + R
Safari N/A Settings App > Safari > Clear History and Website Data Shift + Click Refresh
OR
Command + Option + E, then Command + R		 N/A

Reports

Resolved: Hidden content is too wide on mobile devices
Comment: On small screens, "showing" hidden content sometimes extends beyond the width of the page. This is caused by child images or text that force the parent box to stretch to accomodate them.
Page(s): Boomilever#2020_parameters, Reach_for_the_Stars#Star_Charts
Environment: iPhone SE / iOS 14 / Safari
Date: 2020/08/05
Comment: This was resolved by adding a { word-break: break-all; } which forces exceptionally long links to break rather than extend the width of its parent element and img { height: auto; max-width: 100%; } which puts a cap on the width of all images so they do not extend beyond the width of the page. The width maximum should still work on images that have a custom width specified inline.
Submitter: bernard
Date: 2020/08/05
Comment: a { word-break: break-all; } was removed because it forced words labels of links to break mid-word. Instead, all hyperlinks should be labelled and not pasted unlabelled in plain URL form as the length of some URLs can cause these page width issues.
Submitter: bernard
Date: 2020/08/05


Resolved: Short results tables on nationals pages
Comment: Pages for national tournaments have results tables that are too short and a light grey box that is wider than the table.
Page(s): North Carolina State University 2020 (also applies to other similar pages)
Environment: macOS Catalina (10.15) / Safari
Date: 2020/08/05
Comment: This was resolved by removing style="width:70%; height:50px" border="1" from tables. This issue affected all national tournament pages.
Submitter: bernard
Date: 2020/08/05


Tables display on same lines
Comment: Separate tables display on the same line when a page is scaled down.
Page(s): User:Bernard#Science_Olympiad_Event_Placings
Environment: macOS Catalina (10.15) / Safari
Date: 2020/08/05


Site menu bar does not display username on login button
Date: 2020/08/05
Comment: Currently, the Wiki loads the site menu from a static HTML file because the PHP used to display usernames in the menu interferes with MediaWiki loading.
Submitter: bernard
Date: 2020/08/05


Resolved: Several CSS fixes
Comment: This CSS code below will fix a lot of the issues with tables, vector tabs, and other quality of life enhancements. It will be best if the previous values were replaced with the new values below. 
/*
 * Bernard, pls fix. :)
 */

@media (max-width: 2000px){
    table.wikitable {
        display: inline-block;
        max-width: 100%;
        width: fit-content;
        overflow-x: auto !important;
        border: 0;
        background-color: inherit;
    }
}

/*
 * Fixes Watch list vector tab position (It was positioned too high)
 */
li#ca-unwatch, li#ca-watch {
    margin-top: 0 !important;
}
.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a {
    padding-top: 2.15em !important;
}


@media (max-width: 600px) {
    #left-navigation, #right-navigation {
        margin-top: 2.5em !important;
    }
    #simpleSearch #searchInput {
        width: 40px !important;
    }
}

div.mw-body {
    margin-top: 0.4em !important;
    box-shadow: 0px 0px 10px 5px darkgray; /* Optional shadow. You can remove "box-shadow" if you don't like it. */
    border: 0 !important;
}
div#mw-head {
    background-color: transparent !important;
}

Submitter: Nyda
Date: 2020/08/05
Comment: Thank you, Nydauron! I have implemented most of your suggested changes.
Submitter: bernard
Date: 2020/08/05


Resolved: Header Overflow Wrap
Comment: Found an issue where if screen width gets too small, top headings aren't wrapped and continue off-screen. This solution isn't the best solution (if the word has no spaces, it might just break after each character) but does get the job done.

Please replace .mw-body .firstHeading with the following lines: 

.mw-body .firstHeading {
    overflow: visible;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Environment: Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
Submitter: Nyda
Date: 2020/08/05
Comment: Thank you, Nydauron! I have added your suggested change.
Submitter: bernard
Date: 2020/08/05


Left Vector Tab Pixel Lineup
Comment: Since Bernard complained about it, I might as well fix it. :P The following CSS code makes the left vector tabs flush with the section body. Please replace the old code with the following: 
@media (max-width: 980px) {
    #left-navigation {
        margin-left: 176px;
    }
}
@media (max-width: 900px) {
    #left-navigation {
        margin-left: 81px;
    }
}
@media (max-width: 600px) {
    #left-navigation {
        margin-left: -39px;
    }
}

Environment: Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
Submitter: Nyda
Date: 2020/08/06
Retrieved from "https://scioly.org/wiki/index.php?title=Scioly.org:Wiki_Issues&oldid=106513"