移动版 Aviary 的响应式替代方案

Question

由于 Aviary 不打算在不久的将来提供响应式图像编辑器（例如，在移动 safari 上不是很好），有人知道替代方案吗？

这就是他们说响应式在不久的将来不会发生的地方：

http://support.aviary.com/forums/191584-developer-feedback/suggestions/3718022-fully-responsive-web-editor-for-mobile-sites

Answer 1

您可以使用以下 css 来使 aviary 编辑器弹出响应。这是唯一的解决方案：

@media all and (max-width: 640px) {
html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
}

.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls, #avpw_holder .avpw_is_fullscreen #avpw_controls {
    position: absolute;
    left: 5px;
    right: 5px;
    min-width: 300px;

    -webkit-sizing: border-box;
    -moz-sizing: border-box;
    box-sizing: border-box;
}

#avpw_holder #avpw_tool_content_wrapper {
    position: relative;

    padding-bottom: 56px;

}

#avpw_holder #avpw_tool_main_container {
    position: relative;
}

#avpw_holder #avpw_tool_options_container {
    position: relative;
}

#avpw_holder #avpw_tool_container {
    left: 0;
    right: 0;
    min-width: 300px;
}

#avpw_holder .avpw_prev, #avpw_holder .avpw_next {

}

#avpw_holder .avpw_tool_pager .avpw_clip {
    right: 48px;
}

#avpw_holder .avpw_scroll_strip {
}

#avpw_holder .avpw_scroll_strip .avpw_scroll_page {
    /* max-width:200px; */
    /* width: 300px !important; */
}

#avpw_holder #avpw_rghtArrow {
    right: 0;
}

#avpw_holder #avpw_canvas_embed {
    -webkit-sizing: border-box;
    -moz-sizing: border-box;
    box-sizing: border-box;
    top: 188px;

}

#avpw_holder #avpw_zoom_container {
    width: auto;
    min-width: 42px;
    left: 5px;
    /* right: 5px; */
    background: rgba(51, 51, 51, 0.59);
}

#avpw_holder #avpw_canvas_element, #avpw_holder #avpw_canvas_element.avpw_position_by_transform {
    -webkit-sizing: border-box;
    -moz-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100% !important;

    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;

}

#avpw_holder .avpw_mode_action {
    position: relative;
    height: 55px;
    width: 100%;
    top: 100%;
    /* background: #303740; */
}

#avpw_holder .avpw_mode_action_left,
#avpw_holder .avpw_mode_action_left + .avpw_mode_action_right {
    width: 50%;
}

#avpw_holder .avpw_mode_action_left {
    float: left;
}

#avpw_holder .avpw_mode_action_right {
    float: right;
}

.avpw_mode_action_left:after, .avpw_mode_action_right:before, .avpw_tool_pager .avpw_scroll_rule {
    height: auto !important;

    top: 0 !important;
    bottom: 0 !important;
}

#avpw_holder .avpw_mode_action .avpw_button {
    /* position: relative; */

}

#avpw_holder .avpw_back_button {
    float: left;
}

}

Answer 2

我真的需要移动设备上的 Aviary Web Widget。我尝试了 CSS 调整。这是一场噩梦。

然后，我意识到我可以使用 CSS 变换，将照片编辑器缩放到视口大小。

成功了！

这里是它的核心：

function adjustSize()
{
  // condition to begin using scale is media query below

  if (!actual.mq('(max-width: 757px)'))
  {
      return $('body').css('transform', 'translate(0px, 0px) scale(1)');
  }

  // scale = actual width in pixels divided by 757 (minimum photo editor width)
  var scale = actual('width', 'px') / 757;

  // left side positioning
  var left = (376 * scale * scale) + (-376 * scale);

  return $('body').css('transform', 'translate(' + left + 'px, 0px) scale(' + scale + ')');
}

$(window).resize(adjustSize);

adjustSize();

我正在使用jQuery 和actual。还有这个 CSS：

@media all and (max-width: 941px) {

.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

}

使用上面的 CSS，Aviary 照片编辑器适合的最大宽度为 757 像素。

所以，在 JavaScript 中，我们只有在宽度低于 757px 时才会触发缩放。

我使用的是“body”元素，因为“page”中唯一的东西就是照片编辑器。

您可以根据需要更改和调整解决方案。

我不敢相信它成功了！

Answer 3

这是我的 CSS。不是超级漂亮，但这是一个开始。欢迎评论/建议！

span.aviary-feather {
    background: #ff0000 none repeat scroll 0 0;
    color: #ffffff;
    font-size: 16px !important;
    height: auto !important;
    opacity: 1 !important;
    padding: 5px 40px !important;
    width: auto !important;
}
span.aviary-feather::after {
    content: "edit";
}
#avpw_zoom_container {
    display: none !important;
}
#avpw_powered_branding {
    display: none;
}

#avpw_controlpanel_crop, 
#avpw_controlpanel_orientation .avpw_inset_group:nth-child(3), #avpw_controlpanel_orientation .avpw_label:nth-child(6) {
    display: none !important;
}

.avpw_inner-center {
    right: 0 !important;
}
.avpw_tool_cutout_centered_drawing {
    padding-left: 65px;
    width: 100%;
}
.avpw_colorsplash_eraser {
    width: 45px !important;
}
.avpw_inset_color_widget,
#avpw_controlpanel_drawing .avpw_inset_button_label {
    display: none;
}




@media all and (max-width: 941px) {
#avpw_holder {
    left: 0;
    position: fixed;
    top: 150px;
    transform: translate(0px, 0px) scale(1);
    z-index: 1;
}
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
    bottom: 5px;
    min-height: 600px;
    right: 5px;
    top: 5px;
    transform: translate(0px, 0px) scale(1);
}
.avpw_main_close {
    left: 0 !important;
}
/*#avpw_tool_main_container, #avpw_tool_options_container {
    width: 300px !important;
}*/
.avpw_tool_pager .avpw_clip {
    left: 100px !important;
}
.avpw_mode_action_right {
    float: left !important;
    height: auto !important;
    position: relative !important;
}
.avpw_mode_action.avpw_mode_action_right .avpw_button {
    left: 0;
    top: 25px;
}
.avpw_mode_action.avpw_mode_action_left {
    left: -12px;
    top: 12px;
}

#avpw_canvas_element, #avpw_temp_loading_image, #avpw_canvas_overlay,
#avpw_canvas_controls_layer {
    /*transform-origin: 125px 0 0 !important;
    transform: translate(0px, 0px) scale(0.406667) !important;*/
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
    /*transform: translate(50px, 86px) scale(1) !important;*/
    transform: translate(0, 86px) scale(1) !important;
    width: auto !important;
}



.avpw_canvas_spinner {
    left: 75px !important;
    top: 115px !important;
}

}