[TASK] Improve click area of new content element wizard item 94/58594/4
authorJosef Glatz <josefglatz@gmail.com>
Mon, 8 Oct 2018 03:30:00 +0000 (04:30 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Mon, 8 Oct 2018 07:39:23 +0000 (09:39 +0200)
The clickable area of a new content element wizard item
is improved now.

The <a>-tag was added around the Bootstrap 3 media object
childrens which makes it easier now to add a new content
element by clicking anywhere on the item.

The text shows also the hover-style when an editor hovers
the icon of a NCEW item. The user experience for editors
working on touch devices is also improved by this.

Resolves: #86590
Releases: master
Change-Id: Ib6dc65a0d926945e6e9dd8a9fe7b57e5ee27d8f9
Reviewed-on: https://review.typo3.org/58594
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mathias Brodala <mbrodala@pagemachine.de>
Tested-by: Mathias Brodala <mbrodala@pagemachine.de>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
typo3/sysext/backend/Resources/Private/Templates/NewContentElement/MenuItem.html

index 900f530..3539a5f 100644 (file)
@@ -2,43 +2,37 @@
 <div class="media media-new-content-element-wizard">
        <f:if condition="{onClickEvent}">
                <f:then>
-                       <f:if condition="{content}">
-                               <a href="#" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-dismiss="modal">
+                       <a href="#" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-dismiss="modal">
+                               <f:if condition="{content}">
                                        {content -> f:format.raw()}
-                               </a>
-                       </f:if>
-                       <div class="media-left">
-                               <a href="#" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-dismiss="modal">
+                               </f:if>
+                               <div class="media-left">
                                        {icon -> f:format.raw()}
-                               </a>
-                       </div>
-                       <div class="media-body">
-                               <a href="#" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-dismiss="modal">
+                               </div>
+                               <div class="media-body">
                                        <strong>{wizardInformation.title -> f:format.htmlspecialchars()}</strong>
-                                       <br />
+                                       <br/>
                                        {wizardInformation.description -> f:format.nl2br() -> f:format.htmlspecialchars()}
-                               </a>
-                       </div>
+                               </div>
+                       </a>
                </f:then>
                <f:else>
-                       <input type="radio" class="hide" name="tempB" value="{wizardKey -> f:format.htmlspecialchars()}" onclick="{wizardOnClick -> f:format.htmlspecialchars()}"/>
-                       <f:if condition="{content}">
-                               <a href="#new-content-element-wizard-carousel" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-slide="next">
+                       <input type="radio" class="hide" name="tempB" value="{wizardKey -> f:format.htmlspecialchars()}"
+                                                onclick="{wizardOnClick -> f:format.htmlspecialchars()}"/>
+                       <a href="#new-content-element-wizard-carousel" onclick="{aOnClick -> f:format.htmlspecialchars()}"
+                                data-slide="next">
+                               <f:if condition="{content}">
                                        {content -> f:format.raw()}
-                               </a>
-                       </f:if>
-                       <div class="media-left">
-                               <a href="#new-content-element-wizard-carousel" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-slide="next">
+                               </f:if>
+                               <div class="media-left">
                                        {icon -> f:format.raw()}
-                               </a>
-                       </div>
-                       <div class="media-body">
-                               <a href="#new-content-element-wizard-carousel" onclick="{aOnClick -> f:format.htmlspecialchars()}" data-slide="next">
+                               </div>
+                               <div class="media-body">
                                        <strong>{wizardInformation.title -> f:format.htmlspecialchars()}</strong>
-                                       <br />
+                                       <br/>
                                        {wizardInformation.description -> f:format.nl2br() -> f:format.htmlspecialchars()}
-                               </a>
-                       </div>
+                               </div>
+                       </a>
                </f:else>
        </f:if>
 </div>