0
Bonjour, Y at-il un moyen d'obtenir un résultat comme dans la pièce jointe?2sxc: Tout moyen pour forcer le menu à apparaître de gauche à droite dans un div de droite à gauche
Le bleu (à droite) est la façon dont il est actuellement affiché. L'une orange (à gauche) est la façon dont je veux qu'il soit affiché Current and required
EDIT:
C'est le CSHTML snipet:
@using Extensions;
@using ToSic.SexyContent;
@using System.Collections;
@using System.Web.UI;
@using DotNetNuke.Security.Permissions;
<link rel="stylesheet" data-enableoptimizations="true" href="@App.Path/assets/Announcements.css" />
@if ((Dnn.User.IsSuperUser == false) || (Dnn.User.IsInRole("Administrators") == false))
{
<style>
.sc-content-block-quick-insert {
display: none !important;
}
div.sc-cb-highlight-for-insert {
background: none !important;
}
</style>
}
else
{
<style>
.sc-menu-a {
width: 28px!important;
height: 28px!important;
line-height:28px!important;
background-color: #0088f4;
border-style: solid;
box-sizing: content-box;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color: #fff;
text-align: center;
font-size: 15px;
background-color: purple;
}
</style>
}
<script src="~/DesktopModules/ToSIC_SexyContent/JS/2sxc.api.min.js" data-enableoptimizations="100"></script>
<script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/angular.min.js" data-enableoptimizations="101"></script>
<script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/2sxc4ng.min.js" data-enableoptimizations="110"></script>
@functions
{
public HtmlString GetFiles(ToSic.SexyContent.DynamicEntity dynEntContent, bool bReverse = false)
{
var lFiles = AsAdam(dynEntContent, "Attachments").Files.ToList();
var iFilesCount = lFiles.Count();
var iTmp = 0;
var sRawHtmlString = "";
if (bReverse)
{
lFiles.Reverse();
}
if (iFilesCount > 0)
{
// sRawHtmlString = "« \r\n"; /* "«" */
sRawHtmlString = "« \r\n"; /* "«" */
foreach(var file in lFiles)
{
sRawHtmlString += "\t\t\t\t\t\t<" + $"a href='{@file.Url}'>{@file.FileName}</" + "a>";
sRawHtmlString += ((++iTmp < iFilesCount) ? " ‖\r\n" : "");
}
// sRawHtmlString += "\r\n\t\t\t\t »"; /* "»" */
sRawHtmlString += "\r\n\t\t\t\t\t »"; /* "»" */
}
return (@Html.Raw(sRawHtmlString));
}
}
<div class="app-announcments app-announcments-list">
<h2>
<div id="ulItem_Menu_(U)" name="ulItem_Menu_(U)" style="width: 100%; direction: ltr;">
<table style="width: 100%; padding: 0 5px 0 5px; border: solid 1pt black;" cellpadding="0" cellspacing="0">
<tr style="height: 55px;">
<td style="width: auto;" valign="top">
@if (Dnn.User.IsSuperUser)
{
@Edit.Toolbar(ListContent)
}
@if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false))
{
@Edit.Toolbar(actions: "new",
contentType: "Announcements",
prefill: new {
UID = @Dnn.User.UserID,
PublishDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm"),
PublishedBy = Dnn.User.FullName
}
)
}
</td>
<td style="text-align: right;">
לוח מודעות
</td>
</tr>
</table>
</div>
</h2>
@foreach(var li in List)
{
var anContent = li.Content;
var sMnuItem = "ulItem_" + anContent.EntityId + "_Menu_" + ((Dnn.User.IsSuperUser) ? "(SU)" : "(U)");
var sAdminCommands = "[ " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"new\"," +
" \"sortOrder\" : 0," +
" \"prefill\" : {" +
" \"UID\" : " + Dnn.User.UserID + "," +
" \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," +
" \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" +
" } " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"edit\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"remove\"," +
" \"sortOrder\" : 0 " +
"}, " +
// "{" +
// " \"attributeSetName\" : \"Announcements\"," +
// " \"action\" : \"replace\" " +
// "}, " +
"{" +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"publish\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"more\"," +
" \"sortOrder\" : 0 " +
"}" +
" ]";
var sUserCommandsInAnnouncement = "[ " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"new\"," +
" \"sortOrder\" : 0," +
" \"prefill\" : {" +
" \"UID\" : " + Dnn.User.UserID + "," +
" \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," +
" \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" +
" } " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"edit\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"remove\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"publish\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"more\"," +
" \"sortOrder\" : 0 " +
"}" +
" ]";
<hr/>
<div class="app-announcments-item sc-element">
<div name="divInfoInAnnouncement">
@if (Dnn.User.IsSuperUser)
{
<!-- ## [Super User] block : BEGIN (line 152) ## -->
<ul id='@sMnuItem' name='@sMnuItem' class='sc-menu' data-toolbar='@Html.Raw(@sAdminCommands)'></ul>
<!-- ## [Super User] block : END (line 154) ## -->
}
@if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false))
{
<!-- ## [Announcements User] block: BEGIN (line 158) ## -->
<ul id='@sMnuItem' name='@sMnuItem' class='sc-menu' data-toolbar='@Html.Raw(@sUserCommandsInAnnouncement)'></ul>
<!-- ## [Announcements User] block: END (line 160) ## -->
}
</div>
<div class="app-announcments-link" title="@anContent.AnnouncementTitle">
<table class="app-announcments-text" style="width: 100%; padding: 0 10px 10px 10px;" cellpadding="0" cellspacing="0">
<tr>
<td>
<h4>@anContent.AnnouncementTitle</h4>
פורסם על ידי:
<a href="mailto:@Dnn.User.Email" alt="@Dnn.User.Email">@anContent.PublishedBy</a>
</td>
<td valign="top">
<span class="app-announcments-date">@anContent.PublishDate.ToString("yyyy-MM-dd HH:mm")</span>
</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td colspan="2">
@Html.Raw(anContent.AnnouncementBody)
</td>
</tr>
<tr>
<td colspan="2">
@if (AsAdam(anContent, "Attachments").Files.Count > 0)
{
<div id="divFiles" name="divFiles" style="height: 1em; font-size: 14pt; text-align: center; background: #f3f3f3; color: black; direction: ltr; padding: 5px 0 5px 0;">
@GetFiles(anContent, false)
</div>
}
</td>
</tr>
</table>
</div>
</div>
} @* foreach(var li in List) *@
</div>
... et le (la plupart des le) CSS - J'ai enlevé un peu hors sujet. (La plupart du code CSS est de l'original "Nouvelles - Simple" app 2sxc):
/* Detail Styles */
.app-announcments-detail .app-announcments-image {
/* margin-bottom: 20px; */ border-radius: 4px;
}
.app-announcments-detail-trimmed {
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow: hidden; /* don't show excess chars */
white-space: nowrap; /* force single line */
/* margin-bottom: 25px; */
width: 300px; /* fixed width */
height: 50px; /* Fixed height */
}
/* List Styles */
.app-announcments-item .app-announcments-image {
float: left; width: 38.19% /* Golden Ratio */; /* padding: 0 10px 10px 0; */
}
.app-announcments-item {
padding-bottom: 20px; margin-bottom: 0px;
}
div.app-announcments-link {
display: block; text-decoration: none; color: #666;
/* background-color: #fcfcfc; */ background-color: white;
/* padding: 10px 10px 0 10px; */ overflow: hidden;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
div.app-announcments-link:hover,
div.app-announcments-link:focus {
border-radius: 6px; /* background-color: #eee; */
background-color: #f3f3f3; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
div.app-announcments-link:hover h3,
div.app-announcments-link:focus h3,
div.app-announcments-link:hover h2,
div.app-announcments-link:focus h2 {
color: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
/* Buttons */
div.app-announcments-button,
.app-announcments-button {
/* padding: 10px; */ background: #666; color: white;
display: inline-block; border-radius: 2px;
}
div.app-announcments-link:hover .app-announcments-button,
div.app-announcments-link:focus .app-announcments-button,
div.app-announcments-button:hover,
div.app-announcments-button:focus {
background: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
/************************/
table.app-announcments-link {
display: block; text-decoration: none; color: #666;
/* background-color: #fcfcfc; */ background-color: white;
/* padding: 10px 10px 0 10px; */
overflow: hidden; border-radius: 4px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-webkit-transition: all 1s ease; -moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
table.app-announcments-link:hover,
table.app-announcments-link:focus {
border-radius: 6px; /* background-color: #eee; */
background-color: #f3f3f3; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
table.app-announcments-link:hover h3,
table.app-announcments-link:focus h3,
table.app-announcments-link:hover h2,
table.app-announcments-link:focus h2 {
color: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
/* Buttons */
table.app-announcments-button,
.app-announcments-button {
/* padding: 10px; */ background: #666; color: white;
display: inline-block; border-radius: 2px;
}
table.app-announcments-link:hover .app-announcments-button,
table.app-announcments-link:focus .app-announcments-button,
table.app-announcments-button:hover,
table.app-announcments-button:focus {
background: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
Vous devrez montrer votre code (HTML et CSS) afin que tout le monde puisse vous aider. –
Donc, fondamentalement, vous avez deux problèmes 1) positionnement de la barre d'outils hover et 2) séquence de boutons, non? – iJungleBoy