[savannah-help-public] [sr #109693] Full Markup and Rich Markup help links replace editing page

[Peter Liscovius]

Follow-up Comment #3, sr #109693 (project administration):

Ok, let me explain my position deeper:

Imaging a user writes an item (bug, task, support, comment,..), took time to
formulate the problem, proof read and finally wants to add some markdown sugar
for formatting stuff. The helper link 'Rich Markup' is positioned very near
the input text area. What a user would expect?

I am sure most users are frightened to death seeing that all their work seems
immediatly lost and never will try to use again the markdown helper link for
fear loosing their work in future. Or even never participate again in projects
hosted by a savane / savannah.gnu.org due such bad experience.

In a try to revert a user _could_ use the *back button* of their browser, but
I know systems where that does not work. I also think that it is just a
convenience of todays web browsers to remember the input made on the previous
page. (have not verified it)

The quick fix target="_blank" was just a simple example how to avoid that.
BTW, I am not the only one that sees a problem with opening a help link
replacing same window:

https://www.standardaccesskeys.com/SAK2014/#spec


Access Key   Scope    Location   Window/Tab
0 (zero)     Page     Help       New Window



But as I wrote, there are also softer CSS solutions to that problem that are
not such brutal as like opening a separate tab/new window:

Here is an example of how to implement a *CSS only* html tooltip that just
overlays, not loads another page.
I implemented that css only solution on bugs.flyspray.org for keyboard
shortcuts.

I use *s_* as id-prefix for storing a 'status' in a input checkbox and the
different labels toggle that status. The label tags MUST direct follow the
input tag  in code, but can appear everywhere visual on the page due CSS.

The HTML:

<input type="checkbox" id="s_mdhelp" />
<label for="s_mdhelp" id="mdhelplabel">icon Rich Markup</label>
<label for="s_mdhelp" id="mdhelpmodal"></label>
<div id="mdhelp">
<label for="s_mdhelp" id="mdhelpclose">close icon</label>
The mdhelp content html
</div>


The CSS:

#mdhelplabel {cursor:pointer;padding-left:1em;}
#mdhelpclose {cursor:pointer;float:right; }
#mdhelp {
  display:none;
  position:fixed;
  z-index:100;
  background:#fff;
  border:1px solid #999;
  border-radius:10px;
  padding:10px;
  box-shadow:0 0 400px #000;
  top:50%;
  margin-top:-250px;
  height:520px;
  left:50%;
  width:300px;
  margin-left:-150px;
  box-sizing:border-box;
}
#mdhelpmodal {
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  cursor:pointer;
}
#s_mdhelp {display:none;}
#s_mdhelp:checked ~ #mdhelp, #s_mdhelp:checked ~ #mdhelpmodal {display:
block;}


    _______________________________________________________

Reply to this item at:

  <https://savannah.nongnu.org/support/?109693>

_______________________________________________
  Message sent via Savannah
  https://savannah.nongnu.org/