Repository: roller Updated Branches: refs/heads/bootstrap-ui 73528e025 -> 436aae82c
Small progress on Bootstrapization of media files view. Project: http://git-wip-us.apache.org/repos/asf/roller/repo Commit: http://git-wip-us.apache.org/repos/asf/roller/commit/436aae82 Tree: http://git-wip-us.apache.org/repos/asf/roller/tree/436aae82 Diff: http://git-wip-us.apache.org/repos/asf/roller/diff/436aae82 Branch: refs/heads/bootstrap-ui Commit: 436aae82c3104f85232859826e4e10257aa1af2c Parents: 73528e0 Author: Dave Johnson <[email protected]> Authored: Sun Apr 9 17:13:39 2017 -0400 Committer: Dave Johnson <[email protected]> Committed: Sun Apr 9 17:13:39 2017 -0400 ---------------------------------------------------------------------- .../WEB-INF/jsps/editor/MediaFileView.jsp | 110 +++++++------------ app/src/main/webapp/roller-ui/styles/roller.css | 39 ++++++- 2 files changed, 76 insertions(+), 73 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/roller/blob/436aae82/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp index a8e793b..c0c27af 100644 --- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp @@ -22,31 +22,6 @@ <script src='<s:url value="/roller-ui/jquery-ui-1.11.0/jquery-ui.min.js"/>'></script> -<style> - .mediaObject { - width:120px; - height:120px; - } - .mediaObjectInfo { - clear:left; - width:130px; - margin-left:5px; - margin-top:3px; - font-size:11px; - } - .highlight { - border: 1px solid #aaa; - } - #myMenu { - margin-left: 0; - } - span.button { - height:15px; - width:15px; - float:right; - } -</style> - <script> toggleState = 'Off' @@ -226,27 +201,21 @@ <s:hidden name="newDirectoryName" /> <input type="hidden" name="mediaFileId" value="" /> - <table width="100%"> - <tr> - <td> - <div width="40%"> - <s:text name="mediaFileView.sortBy"/>: - <s:select id="sortByMenu" name="sortBy" list="sortOptions" listKey="key" listValue="value" - onchange="document.mediaFileViewForm.submit();"/> - </div> - </td> - <td> - <div style="float:right" width="40%"> - <s:if test="!allDirectories.isEmpty"> - <%-- Folder to View combo-box --%> - <s:text name="mediaFileView.viewFolder"/>: - <s:select id="viewDirectoryMenu" name="viewDirectoryId" - list="allDirectories" listKey="id" listValue="name" onchange="onView()"/> - </s:if> - </div> - </td> - </tr> - </table> + <div class="top-controls"> + <s:if test="!allDirectories.isEmpty"> + <%-- Folder to View combo-box --%> + <span><s:text name="mediaFileView.viewFolder"/>:</span> + <s:select id="viewDirectoryMenu" name="viewDirectoryId" + list="allDirectories" listKey="id" listValue="name" onchange="onView()"/> + </s:if> + </div> + + <div class="top-controls"> + <span><s:text name="mediaFileView.sortBy"/>:</span> + <s:select id="sortByMenu" name="sortBy" list="sortOptions" listKey="key" listValue="value" + onchange="document.mediaFileViewForm.submit();"/> + </div> + <%-- ***************************************************************** --%> @@ -262,8 +231,9 @@ } </script> - <div width="720px" height="500px" style="clear:right"> - <ul id = "myMenu"> + <div id="imageGrid"> + + <ul> <s:if test="!pager"> @@ -272,7 +242,7 @@ <%-- NOT SEARCH RESULTS --%> <s:if test="childFiles.size() ==0"> - <p style="text-align: center"><s:text name="mediaFileView.noFiles"/></p> + <s:text name="mediaFileView.noFiles"/> </s:if> <%-- List media files --%> @@ -377,41 +347,36 @@ </s:else> </ul> + </div> <div style="clear:left;"></div> <s:if test="(!pager && childFiles.size() > 0) || (pager && pager.items.size() > 0) || (currentDirectory.name != 'default' && !pager)"> - <table width="100%"> - <tr> - <td> + <div class="bottom-controls"> - <s:if test="(!pager && childFiles.size() > 0) || (pager && pager.items.size() > 0)"> - <input id="toggleButton" type="button" class="btn" - value='<s:text name="generic.toggle" />' onclick="onToggle()" /> + <s:if test="(!pager && childFiles.size() > 0) || (pager && pager.items.size() > 0)"> + <input id="toggleButton" type="button" class="btn" style="display: inline" + value='<s:text name="generic.toggle" />' onclick="onToggle()" /> - <input id="deleteButton" type="button" class="btn" - value='<s:text name="mediaFileView.deleteSelected" />' onclick="onDeleteSelected()" /> + <input id="deleteButton" type="button" class="btn" style="display: inline" + value='<s:text name="mediaFileView.deleteSelected" />' onclick="onDeleteSelected()" /> - <input id="moveButton" type="button" class="btn" - value='<s:text name="mediaFileView.moveSelected" />' onclick="onMoveSelected()" /> + <input id="moveButton" type="button" class="btn" style="display: inline" + value='<s:text name="mediaFileView.moveSelected" />' onclick="onMoveSelected()" /> - </s:if> + </s:if> - <s:select id="moveTargetMenu" name="selectedDirectory" - list="allDirectories" listKey="id" listValue="name" /> + <s:select id="moveTargetMenu" name="selectedDirectory" cssStyle="display: inline; width: 15em" + list="allDirectories" listKey="id" listValue="name" /> - <s:if test="currentDirectory.name != 'default' && !pager"> - <span style="float:right;"> - <s:submit value="%{getText('mediaFileView.deleteFolder')}" - action="mediaFileView!deleteFolder" onclick="onDeleteFolder();return false;"/> - </span> - </s:if> + <s:if test="currentDirectory.name != 'default' && !pager"> + <s:submit value="%{getText('mediaFileView.deleteFolder')}" cssClass="btn" + action="mediaFileView!deleteFolder" onclick="onDeleteFolder();return false;"/> + </s:if> - </td> - </tr> - </table> + </div> </s:if> @@ -437,7 +402,8 @@ <s:url var="mediaFileEditURL" action="mediaFileEdit"> <s:param name="weblog" value="%{actionWeblog.handle}" /> </s:url> - $("#mediaFileEditor").attr('src', '<s:property value="%{mediaFileEditURL}" />' + '&mediaFileId=' + mediaFileId); + $("#mediaFileEditor").attr('src', + '<s:property value="%{mediaFileEditURL}" />' + '&mediaFileId=' + mediaFileId); $(function() { $("#mediafile_edit_lightbox").dialog({ modal : true, http://git-wip-us.apache.org/repos/asf/roller/blob/436aae82/app/src/main/webapp/roller-ui/styles/roller.css ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/roller-ui/styles/roller.css b/app/src/main/webapp/roller-ui/styles/roller.css index d1ff652..f6bbb52 100644 --- a/app/src/main/webapp/roller-ui/styles/roller.css +++ b/app/src/main/webapp/roller-ui/styles/roller.css @@ -251,4 +251,41 @@ body { #moveTargetMenu { width: 15em; -} \ No newline at end of file +} + +.mediaObject { + width:120px; + height:120px; +} + +.mediaObjectInfo { + clear:left; + width:130px; + margin-left:5px; + margin-top:3px; + font-size:11px; +} + +.highlight { + border: 1px solid #aaa; +} +span.button { + height:15px; + width:15px; + float:right; +} + +.sortByMenu, .viewDirectoryMenu { + display: inline; +} + +#imageGrid { + display: block; + overflow: auto; + margin: 1em 0 1em 0; +} + +div.bottom-controls div, +div.top-controls, div.top-controls div, div.top-controls span, div.top-controls select { + display: inline; +}
